vue 子路由如何激活父路由_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: '设备在线率'

}

},

主路由的设置：

exac不要加



设备中心



用户中心

router-link 作为 vue 中的路由跳转标签，它内置有一个选中的状态，当处于当前路由时，会给 router-link 加一个 router-active-class，即选中状态的 class，同时还提供有一个 exact 属性，当加了 exact 属性的时候表示精确匹配，也就是会精确匹配 Url，所以如果给主路由设置了 exact 属性的话，当处于子路由时，Url 就匹配不到主路由了，那么主路由也就不会处于选中状态。所以解决办法就是不要在主路由和子路由的 router-link 上设置 exact 属性，问题即可解决。