原因:把父级路由和子级路由的路径默认path:'/',并且router-link都添加了exact:
routes:[
{
name:'FindMusic',
path:'/',
component:FindMusic,
meta:{title:'发现音乐'},
children:[
{
path:'',
component:PersonRecommend,
meta:{title:'个性推荐'},
},
]
}
]
router-link标签中添加了exact,导致点击子级路由时父级路由即默认路由的exact属性被激活,从而引起了 点击二级路由的时候,一级路由的active消失。
<li><router-link class="navItem" active-class="active" to="/" exact >发现音乐</router-link></li>
<li ><router-link class="navSeText" active-class="active" to="/findMusic/personRecommend" >个性推荐</router-link></li>
解决办法:
1.使用重定向:在router的js文件中改成如下:
const router = new VueRouter({
linkActiveClass:'active', //之后添加的,为了可以重新设置active的样式,否则不能设置
routes:[
{path:'/',redirect:'/findMusic/personRecommend'}, //之后添加的,使用重定向
{
name:'FindMusic',
path:'/findMusic', //可以修改成原来的样子
component:FindMusic,
meta:{title:'发现音乐'},
redirect:'/findMusic/personRecommend',
children:[
{
path:'personRecommend', //修改成原来的样子
component:PersonRecommend,
meta:{title:'个性推荐'},
},
2.接着修改router-link的为:
<router-link class="navItem" active-class="active" to="/findMusic" >发现音乐</router-link>
<router-link class="navSeText" active-class="active" to="/findMusic/personRecommend" >个性推荐</router-link>
这样就可以了,完成效果: