实现如下图所示的一二级路由的高亮情况:
在一级路由APP.vue下设置:
.head a.router-link-active {background-color: rgb(235, 221, 204);
}
在二级路由Mycenter.vue下设置:
/* 要求在点击跳转到mycenter_lianxi页面时候父路由保持高亮 */
.con_left a.router-link-exact-active {color: #fff;background-color: rgb(235, 221, 204);border-radius: 5px;padding: 10px;margin-right: 20px;
}
统一路径大小写(重要)
确保所有路径使用统一的小写格式(Vue Router默认区分大小写):
// 路由配置中统一使用小写
path: '/mycenter'// 所有链接中使用小写
<router-link to="/mycenter">
-
router-link-active:当路径包含目标链接时激活(适合一级导航)
-
router-link-exact-active:仅当路径精确匹配时激活(适合当前页面导航)