Я пытаюсь получить ссылку навигационной панели. Введение по умолчанию активно при использовании варианта dynamici c маршрута по сравнению с псевдонимом по умолчанию из '/' .
Когда вы посещаете динамический URL c, он выглядит следующим образом (обратите внимание на 150/30 / 4,0 в URL):
Когда вы go URL-адрес просто '/', то он выглядит правильно и подсвечивает зеленый "вводный" URL-адрес.
Они оба go к одному и тому же маршруту с именем «Домой», поэтому я не понимаю, почему он не отображается как активный только для «/» маршрут, а не динамический c один?
Я попытался изменить расположение маршрутов, сделав параметры необязательными и многие другие вещи безрезультатны. Я не уверен, как это сделать правильно с Vue, так как я все еще изучаю фреймворк и не смог найти никакой информации по этому вопросу.
Приложение. vue
<template>
<div id="app">
<div id="intro">
<h3>TDFCalc for iPhone: User Guide</h3>
</div>
<div id="nav">
<ul>
<li>
<router-link :to="{ name: 'Home' }">Introduction</router-link>
</li>
<li>
<router-link to="/conventional">Conventional</router-link>
</li>
<li>
<router-link to="/hyperfractionation">Hyperfractionation</router-link>
</li>
<li>
<router-link to="/concomitant-boost">Concomitant Boost</router-link>
</li>
<li>
<router-link to="/ldr">I-125 (LDR)</router-link>
</li>
</ul>
</div>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 5px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
/* #nav a.router-link-active {
color: #ff0000;
} */
#nav a.router-link-exact-active {
color: #42b983;
}
ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
h3 {
margin: 20px 0 0;
}
li {
margin: 5px 5px;
/*display: inline-block;*/
}
a {
color: #42b983;
}
</style>
Маршрутизаторы - индекс. js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/conventional',
name: 'Conventional',
component: () => import('../views/Conventional.vue')
},
{
path: '/hyperfractionation',
name: 'Hyperfractionation',
component: () => import('../views/Hyperfractionation.vue')
},
{
path: '/concomitant-boost',
name: 'ConcomitantBoost',
component: () => import('../views/ConcomitantBoost.vue')
},
{
path: '/:doseperfraction?/:numoffractions?/:alphabeta?',
name: 'Home',
component: Home,
alias: '/',
props: true
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
РЕДАКТИРОВАТЬ:
Я недавно изменил app. vue файл для этого, убедившись, что все маршруты ссылаются на «именованные» версии маршрутов в случае, если это было проблемой, но все еще ничего.
<template>
<div id="app">
<div id="intro">
<h3>TDFCalc for iPhone: User Guide</h3>
</div>
<div id="nav">
<ul>
<li>
<router-link :to="{ name: 'Home' }">Introduction</router-link>
</li>
<li>
<router-link :to="{ name: 'Conventional' }">Conventional</router-link>
</li>
<li>
<router-link :to="{ name: 'Hyperfractionation' }">Hyperfractionation</router-link>
</li>
<li>
<router-link :to="{ name: 'ConcomitantBoost' }">Concomitant Boost</router-link>
</li>
<li>
<router-link :to="{ name: 'Ldr' }">I-125 (LDR)</router-link>
</li>
</ul>
</div>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 5px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
/* #nav a.router-link-active {
color: #ff0000;
} */
#nav a.router-link-exact-active {
color: #42b983;
}
ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
h3 {
margin: 20px 0 0;
}
li {
margin: 5px 5px;
/*display: inline-block;*/
}
a {
color: #42b983;
}
</style>