vue 嵌套路由，router-link-active的問題

最近開發的過程中，遇到一個嵌套路由的問題，需求是這這樣的，

首頁三個路由   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 屬性！