vue 嵌套路由，router-link-active的问题

Posted 2020-10-15 饭饭大人

最近开发的过程中，遇到一个嵌套路由的问题，需求是这这样的，

首页三个路由   a    b    c  

路由写法是

export default new Router({
  routes: [
    // {
    //   path: \'/\',
    //   component: \'\'
    // },
    // {
    //   path: \'/history-grade\',
    //   component: \'\'
    // },
    {
      path: \'/source-setting\',
      component: setting,
      children: [
        {
          path:\'\',
          component: baseSource
        },
        {
          path: \'baseSource\',
          component: baseSource
        },
        {
          path: \'contact\',
          component: contact
        },
        {
          path: \'push\',
          component: push
        },
        {
          path: \'account\',
          component: account
        }
      ]
    }
  ]
})

然后c路由下面 又分为其他的不同功能，由此生出1,2,3 路由，因此是c路由下嵌套 3个路由，在点击三个主路由的时候，会有一个active的样式，如下图

一开始我是用vue里面router-link-exact-active来做的，但是因为有一个嵌套路由 

在子路由点击的时候，要保证此时当前的激活路由还处于active状态，显然如果用router-link-exact-active 来做的话 ，就不能实现了。即在你点击子路由的时候，主路由的active样式就消失了，

多次尝试之后

<router-link to="/" exact>比赛数据</router-link>
<router-link to="/history-grade">历史成就</router-link>
<router-link to="/source-setting">资料设置</router-link>

router-link-active 表示当前路由被激活的时候，添加的属性

在第一个\'/\'添加exact之后，默认是false，发现，在点击子路由的时候，被激活的’资料设置‘这个路由存在router-link-active属性，所以把router-link-exact-active改为router-link-active 解决了这个样式的问题。

加上exact 属性 表示 <!-- 这个链接只会在地址为 / 的时候被激活 -->，不加的时候，每个路由都会激活当前这个路由 ，就是每个路由激活的时候 都会使得

<router-link to="/" exact>比赛数据</router-link>  多一个router-link-active 属性！