當我們使用elementui 中的 NavMenu 導(dǎo)航菜單時佃声，可能會有這樣一個問題艺智，我們點擊的那一項高亮顯示，但是當我們從一級頁面跳轉(zhuǎn)到子頁面時圾亏，菜單高亮?xí)稹＿@樣是很不友好的，我們可以使用 NavMenu中的 default-active 和 router 屬性來解決志鹃。
<el-menu
class="sidebar-el-menu"
:default-active="onRoutes"
:collapse="collapse"
text-color="#fff"
active-text-color="#fff"
background-color="#0e0d0a"
unique-opened
:router="true">
</el-menu>
設(shè)置 onRoutes 計算屬性
export default {
computed: {
onRoutes() {
const route = this.$route
const { meta, path } = route
// 可以在路由配置文件中設(shè)置自定義的路由路徑到meta.activeMenu屬性中夭问，來控制菜單自定義高亮顯示
// meta中 有activeMenu 字段的子頁面，都會顯示高亮
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}
}
}
路由配置
routes: [
{
path: '/',
name: 'apiDocument',
component: customerLayout,
children: [
{
path: '/apiDocument',
component: '...',
meta: {
title: '父頁面'
}曹铃，
{
path: '/apiDocument',
component: '...',
meta: {
title: '子頁面'缰趋，
activeMenu:'apiDocument'
}，
{
path: '/apiDocument',
component: '...',
meta: {
title: '父頁面'陕见，
activeMenu:'apiDocument'
}
}]
}
]
在每次點擊菜單時瀏覽器地址欄中的地址就會改變埠胖，一級菜單是 通過 index 來控制選中狀態(tài)從而顯示高亮，現(xiàn)在我們使用activeMenu來自定義控制二級對應(yīng)高亮淳玩，使得activeMenu配置和一級菜單的index屬性中的配置一直一致，這樣就使主菜單保持高亮了非竿。
