思路原理：
通过路由router设置路由元信息（meta）记录地址，在MenuNav中读取meta中设置的信息，匹配el-menu-item中index的值，来解决刷新或地址改变造成的一些导航栏高亮问题。
目的：
我们希望可以实现以下几种功能情况：、
在菜单中，存在多级带单。当点击下一级时，上一级常亮。刷新后依旧保持常亮。
或者存在有时候我们需要在页面内进行页面跳转的情况，比如人员查看，点击“查看”按钮后跳转至详情页面，此时要求一级导航栏的“人员管理”导航按钮常亮。
点击当前菜单高亮；如果菜单下有二级下拉，那么点击下拉二级菜单高亮（刷新页面后依旧保持高亮）
横向主菜单高亮，代表这个页面是当前页面；在当前页面中还嵌入一个纵向菜单，这个纵向菜单高亮代表这个页面显示不同的tab（刷新页面后依旧保持高亮）
其实，这三种情况非常相似，实现的逻辑一样，只是有点小细节不同。
如何实现：
NavMenu 导航菜单高亮如果需要刷新页面了之后也能高亮，那么就使用路由匹配式高亮。
我们的el-menu组件标签中配置最重要的两个（其他配置看官网）：
:default-active="activeMenu" // 默认高亮（当前激活菜单的 index）
router // 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，此时菜单的高亮是menu组件中的index属性和地址栏中的路径匹配到了就会高亮。例1：
<el-menu
:default-active="activeMenu"
class="el-menu-demo"
mode="horizontal"
router
:background-color="#000"
text-color="#fff"
active-text-color="#409eff">
<el-menu-item index="/home"><i class="iconfont icon-zhuye" style="vertical-align: 0px;"></i> 首页</el-menu-item>
<el-submenu index="1">
<template slot="title"><i class="el-icon-monitor"></i>监控</template>
<el-menu-item index="/monitor/aaa">111111</el-menu-item>
<el-menu-item index="/monitor/bbb">22222</el-menu-item>
<el-menu-item index="/monitor/ccc">333333</el-menu-item>
<el-menu-item index="/monitor/ddd">44444</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-s-marketing"></i>CDN</template>
<el-menu-item index="/cdn/aaa">域名管理</el-menu-item>
<el-menu-item index="/cdn/bbb">111111</el-menu-item>
<el-menu-item index="/cdn/ccc">222222</el-menu-item>
<el-menu-item index="/cdn/ddd">333333</el-menu-item>
</el-submenu>
<el-menu-item index="/apiDocument"><i class="iconfont icon-iconset0118"></i> 接口文档</el-menu-item>
</el-menu>逻辑部分：
export default {
computed: {
// 我们使用计算属性来获取到当前点击的菜单的路由路径，然后设置default-active中的值
// 使得菜单在载入时就能对应高亮
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
// 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}
}
}例2：
嵌套式菜单中我们要同时控制两个分离菜单的高亮，那么在路由配置文件router/index.js中及其重要了，需要在每项路由中设置meta属性的不同字段来控制高亮。
记住：刷新仍能高亮是以路由路径匹配式高亮
结合第一点的横向菜单为主菜单menu配置，特别注意文档接口那一项的index路径。
文档接口页面的纵向菜单配置：
<el-menu
:default-active="activeMenu"
class="el-menu-vertical-demo api-menu"
router
@open="handleOpen"
@close="handleClose"
background-color="#f8f8f8"
:default-openeds=defaultOpen
text-color="#666"
active-text-color="#409eff">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-s-marketing"></i>
<span class="bold-font">CDN</span>
</template>
<el-menu-item index="/apiDocument/cdnSummary">
<span class="bold-font">概览</span>
</el-menu-item>
<el-submenu index="1-1">
<template class="sub-drop-title" slot="title"><span class="bold-font">API列表</span> 总数2个</template>
<el-menu-item class="api-menu-item" index="/apiDocument/pushRefresh">
<span class="api-item">
<span>push_refresh </span>
<span style="font-size: 13px;color:#999;">aaaaa</span>
</span>
</el-menu-item>
<el-menu-item class="api-menu-item" index="/apiDocument/refreshTasks">
<span class="api-item">
<span>refresh_tasks </span>
<span style="font-size: 13px;color:#999;">bbbbb</span>
</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>export default {
data () {
return {
defaultOpen: ['1','1-1'] // 默认展开菜单项
}
},
computed: {
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.apiActiveMenu) { // 注意这里很重要
return meta.apiActiveMenu
}
return path
}
}
}router/index.js文件的路由配置（特别关注activeMenu、apiActiveMenu的配置）：
routes: [
// 重定向，打开接口文档页面就重定向到 概览
{
path: '/apiDocument',
redirect: '/apiDocument/cdnSummary',
hidden: true // 不需要再Menu菜单上显示的就设置这个属性
},
// 接口文档路由
{
// 接口文档菜单的动态加载配置 start
path: '',
name: 'apiDocument',
component: customerLayout,
gotoPath: '/apiDocument', // 自定义属性 （主菜单中的index属性值）
meta: {
title: '接口文档',
activeMenu: '/apiDocument'
},
showOne: true, // 自定义属性
hidden: true,
// 接口文档菜单的动态加载配置 end
children: [{
path: '',
component: apiDoc,
children: [
{
path: '/apiDocument/cdnSummary',
component: cdnSummary,
meta: {
activeMenu: '/apiDocument', // 主菜单 的 接口文档 高亮
apiActiveMenu: '/apiDocument/cdnSummary' // 接口文档的子菜单高亮
}
},
{
path: '/apiDocument/pushRefresh',
component: pushRefresh,
meta: {
activeMenu: '/apiDocument',
apiActiveMenu: '/apiDocument/pushRefresh' // 接口文档的子菜单高亮
}
},
{
path: '/apiDocument/refreshTasks',
component: refreshTasks,
meta: {
activeMenu: '/apiDocument',
apiActiveMenu: '/apiDocument/refreshTasks' // 接口文档的子菜单高亮
}
}
]
}]
}
]附自己代码部分：（比较熟悉理解）
在路由中添加：
实现高亮的思想是：在每次点击菜单时浏览器地址栏中的地址就会改变，这时地址栏就会和apiActiveMenu配置中地址一致，我们使用apiActiveMenu来自定义控制二级对应高亮；而一级菜单栏由activeMenu来自定义高亮，使得activeMenu配置和一级菜单的index属性中的配置一直一致，这样接口文档内的纵向菜单在切换的时候就不会影响到一级主菜单的高亮了。
参考链接：https://blog.csdn.net/m0_38134431/article/details/94755527