需求描述
用Vue-admin-template做后台时,难免遇到在某一父界面进入子界面查看详情或者进行其他操作的情况,或者父路由使用了重定向到其某子路由。默认情况下,这时候侧边栏对应的父路由会取消高亮,但是我们想要它保持高亮
问题分析
我们用来示例的路由表假定是这样配置
{
path: 'examine',
component: () => import('@/views/nested/menu1/index'),
redirect: '/nested/examine/examinePage',
name: 'examineIndex',
meta: {
title: '报名审核',
breadNum: 1,
},
children: [
{
path: 'examinePage',
component: () => import('@/views/nested/menu1/examine'),
name: 'examine',
meta: {
title: '报名审核',
breadNum: 2,
},
hidden: true
}
]
},
很明显我们是重定向到其子路由的,但是侧边栏的item
是渲染的父路由,这时候选中审核会出现我们想要的子路由界面,但是侧边栏不会高亮。
查看vue-admin-template源码的侧边栏组件可以发现高亮渲染原理。在路径@/components/layout/components/Sidebar/index.vue
中,我们可以发现高亮的判定如下
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
</el-menu>
观察到default-active
默认激活Menu Attribute
绑定的是activeMenu
方法:
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
这里框架作者注释写到sidder会高亮你设置的路径,从代码可见判定方法是两种:路由的meta
有配置activeMenu
则按照activeMenu
渲染,否则高亮当前选中路由的路径
那么回到router/index.js
,在children
中配置好我们想要高亮的父路由路径
children: [
{
path: 'examinePage',
component: () => import('@/views/nested/menu1/examine'),
name: 'examine',
meta: {
title: '报名审核',
breadNum: 2,
activeMenu: '/nested/examine'
},
hidden: true
}
]
在重定向到的子路由的meta
添加activeMenu: '需要高亮的path'
,比如我们这里在侧边栏渲染出的是父路由对应的path是/nested/examine
问题解决,如果嵌套的子路由多那也在每一级都配置好activeMenu
就好