實現如下圖所示的一二級路由的高亮情況:
在一級路由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:僅當路徑精確匹配時激活(適合當前頁面導航)