router:点击子路由时，父级路由的active属性消失

原因：把父级路由和子级路由的路径默认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>

这样就可以了，完成效果：