vue路由(router)设置:父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
本文知识点比较简单,主要面向新人解惑,vue前辈请忽略。我们需要实现的效果,父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失,见下图:在实际开发中,可能遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了原因:1、子路由router-link加了exac精确匹配路由2、在写路由的时候,父子路由没有严格按照一级/二级来写...
本文知识点比较简单,主要面向新人解惑,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"重定向到第一个子路由,实现点击父级进入第一个子路由;
所有子路由都要加上主路由
以上内容如有错误,请各位朋友指正,谢谢。
更多推荐
所有评论(0)