原因：当路由地址发生变化时，想要对应的高亮显示的菜单项发生变化，只需要设置 :default-active="$route.path"即可，但是当跳转的路由(父路由)包含子路由(即包含另一个导航时)，且父路由设置了默认显示的子路由，此时父路由对应的菜单项就无法正常高亮显示，因为父路由设置了默认显示的子路由，当前路由地址就变成了子路由的地址，而菜单项高亮显示的路由对应的路由地址为父亲路由，而不是子路由所以无法高亮显示， 简单来说本来 /aaa 应该高亮显示菜单项，但现在实际的路由地址为 /aaa/bbb，所以无法高亮显示。
解决方法一：计算属性+$route.path+meta属性
① 在子路由中添加meta属性，设置需要高亮显示的路由地址
routes: [{path: '/aaa',component: AAA,redircct:'/aaa/bbb'children: [{path: 'bbb',component: BBB,meta: {activeMenu: '/aaa'}]}]
② 将default-active的值设置为计算属性
<el-menuclass="sidebar-el-menu":default-active="onRoutes":collapse="collapse"text-color="#fff"active-text-color="#fff"background-color="#0e0d0a"unique-opened:router="true"></el-menu>
③ 在计算属性中判断路由是否有meta属性，如果有则返回meta属性中设置的高亮显示的路由地址，如果没有则返回$route.path
export default {computed: {onRoutes() {const route = this.$routeconst {meta, path } = route// 在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示// meta中 有activeMenu 字段的子页面，都会显示高亮if (meta.activeMenu) {return meta.activeMenu}return path}}}
方法二：非添加meta属性
将default-active的值设置为计算属性，然后在计算属性中直接判断 r o u t e . p a t h 是 否 是 以 / x x x 开 头 的 ( / x x x 是 父 路 由 的 路 由 地 址 ) ， 如 果 是 以 / x x x 开 头 的 则 返 回 对 应 的 / x x x , 否 则 返 回 route.path是否是以 /xxx 开头的(/xxx 是父路由的路由地址)，如果是以 / xxx 开头的则返回对应的 /xxx ,否则返回 route.path是否是以/xxx开头的(/xxx是父路由的路由地址)，如果是以/xxx开头的则返回对应的/xxx,否则返回route.path
<el-menuclass="sidebar-el-menu":default-active="onRoutes":collapse="collapse"text-color="#fff"active-text-color="#fff"background-color="#0e0d0a"unique-opened:router="true"></el-menu>
activeMenu() {// 获取path地址const path = this.$route.path// 判断path地址是否是以/xxx开头的(/xxx 为对应显示的一级路由的导航的路由地址)if (path.startsWith('/tools')) {// 如果是则返回一级路由的导航的路由地址return '/tools'}return path}
