在实际开发中,嵌套路由常常会用到,基本用法也很简单,今天遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了javascript
缘由是:html
1.子路由router-link加了exac精确匹配路由vue
2.在写路由的时候,父子路由没有严格按照一级/二级来写java
嵌套路由中默认选中第一个子路由
{
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: '设备在线率'
}
},
主路由的设置:post
exac不要加
设备中心
用户中心
router-link 做为 vue 中的路由跳转标签,它内置有一个选中的状态,当处于当前路由时,会给 router-link 加一个 router-active-class,即选中状态的 class,同时还提供有一个 exact 属性,当加了 exact 属性的时候表示精确匹配,也就是会精确匹配 Url,因此若是给主路由设置了 exact 属性的话,当处于子路由时,Url 就匹配不到主路由了,那么主路由也就不会处于选中状态。因此解决办法就是不要在主路由和子路由的 router-link 上设置 exact 属性,问题便可解决。 spa