如上图,比如说:当前选中的页面为“商户统计”,对应的路由为/total
,当点击明细后,打开一个新的页面,路由为/detail
,此时“商户统计”会失去选中的状态。
现在需求为,打开明细页面后,商户统计仍保持选中状态。
代码修改
导航页面组件: Sidebar/index.vue
为了方便查看,el-menu中的其他属性我都去掉了,只留下了相关的:default-active="activeMenu"
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
>
<!-- SidebarItem组件 -->
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
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
},
从上面这个activeMenu
方法可以看到meta.activeMenu
这个属性,所以去配置子路由的页面,给meta加上这个属性即可。
{
path: '/detail',//明细页面
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/detail/index'),
name: 'detail',
meta: {
title: '明细',
activeMenu: '/total' // 保持导航中“商户统计”的激活状态
},
hidden: true
}
]
},
default-active为当前激活菜单的 index。项目中取值为当前菜单的路由,且给
el-submenu
及el-menu-item
的index属性配的也是对应菜单的路由,保持一致。