vue路由(router)设置：父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失

本文知识点比较简单，主要面向新人解惑，vue前辈请忽略。

 

 

我们需要实现的效果，父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失，见下图：

在实际开发中，可能遇到了当前路由下（父路由）在点击它的子路由时，他的（父路由）选中状态消失了

原因：

1、子路由router-link加了exac精确匹配路由

2、在写路由的时候，父子路由没有严格按照一级/二级来写

 

知识点

router-link 作为 vue 中的路由跳转标签，它内置有一个选中的状态，当处于当前路由时，会给 router-link 加一个 router-active-class，即选中状态的 class，同时还提供有一个 exact 属性，当加了 exact 属性的时候表示精确匹配，也就是会精确匹配 Url，所以如果给主路由设置了 exact 属性的话，当处于子路由时，Url 就匹配不到主路由了，那么主路由也就不会处于选中状态。  如果想了解更多，请阅读：《vue路由(router)关于linkExactActiveClass和linkExactActiveClass问题》

所以解决办法就是不要在主路由和子路由的 router-link 上设置 exact 属性，问题即可解决。

 

下面是具体配置：

组件配置：

<nav>
      <ul class="ul">
        <li>
          <router-link to="/brand"><span>汐熙·故事</span></router-link>
          <dl class="dl">
            <dd><router-link to="/brand/company"><span>企业介绍</span></router-link></dd>
            <dd><router-link to="/brand/story"><span>品牌故事</span></router-link></dd>
            <dd><router-link to="/brand/productconcept"><span>产品理念</span></router-link></dd>
          </dl>
        </li>
        ...
      </ul>
    </nav>

注意：
主路由是：/brand ，子路由都要加上主路由， 且不要加"exac" 

 

路由配置：

export default new Router({
  routes: [
    //汐熙·故事
    {
      path: "/brand", //主路由
      name: "brand",
      redirect: "/brand/company",  //重定向到第一个子路由
      components: {
        ...
      },
      children: [
        {
          path: "/brand/company", //加主路由
          name: "company",
          components: {
            ...
          }
        },
        {
          path: "/brand/story", //加主路由
          name: "story",
          components: {
            ...
          }
        }
        ...
      ]
    }
  ]
});

注意：
主路由使用"redirect"重定向到第一个子路由，实现点击父级进入第一个子路由；
所有子路由都要加上主路由

 

以上内容如有错误，请各位朋友指正，谢谢。