vue父路由默認選中第一個子路由，切換子路由讓父路由高亮不會消失

在實際開發中，嵌套路由經常會用到，基本用法也很簡單，今天遇到了當前路由下（父路由）在點擊它的子路由時，他的（父路由）選中狀態消失了

原因是：

1.子路由router-link加了exac精確匹配路由

2.在寫路由的時候，父子路由沒有嚴格按照一級/二級來寫

嵌套路由中默認選中第一個子路由

 

{
          path: '/dec', // 設備中心，主路由
          redirect: '/dec/decOverview',
          name: 'decIndex',
          component: DecIndex,
          meta: {
            title: '設備中心'
          },
          children: [
            {
              path: '/dec/decOverview', // 子路由前面一定要加上主路由，在切換的時候還是會匹配主路由，主路由高亮不會消失
              name: 'decOverview',
              component: DecOverview,
              meta: {
                title: '設備概覽'
              }
            },
            {
              path: '/dec/decUse/onlineRate', // 默認的子路由
              name: 'onlineRate',
              component: OnlineRate,
              meta: {
                title: '設備在線率'
              }
            },

　　主路由的設置：

<li>
          <router-link class="classify" tag="div" to="/dec" event="click"> exac不要加
            <i class="iconfont sjzx"></i>
            <span>設備中心</span>
          </router-link>
        </li>
        <li>
          <router-link class="classify"  tag="div" to="/user" event="click">
            <i class="iconfont user"></i>
            <span>用戶中心</span>
          </router-link>
        </li>

　router-link 作為 vue 中的路由跳轉標簽，它內置有一個選中的狀態，當處於當前路由時，會給 router-link 加一個 router-active-class，即選中狀態的 class，同時還提供有一個 exact 屬性，當加了 exact 屬性的時候表示精確匹配，也就是會精確匹配 Url，所以如果給主路由設置了 exact 屬性的話，當處於子路由時，Url 就匹配不到主路由了，那么主路由也就不會處於選中狀態。所以解決辦法就是不要在主路由和子路由的 router-link 上設置 exact 屬性，問題即可解決。