原因
管理系统,左侧导航栏有个单级的菜单(无子一级的菜单),进入后页面显示的是具体的房间列表。点击具体的房间可以进入房间详情页面,展示具体的房间数据。这时页面路由发生变化。发现,导航栏中不存在高亮的选项。
进入导航栏页面
<el-menu
....//其他配置项
:default-active="$route.path"
....
</el-menu>
上述列表项
<el-menu-item index="/roomIndex">
<span slot="title" class="roomListIcon">
<span>房间列表</span>
</span>
</el-menu-item>
而进入的房间详情页面在vue router 配置页面为
{
path: '/roomIndex',
name: 'RoomIndex',
component: RoomIndex,
meta: { },
},
{
path: '/roomDetail/:roomId',
name: 'Roomdetail',
component: Roomdetail,
meta: {}
}
这样就可以看到,是因为el-menu 高亮显示的是 $route.path 。当页面进入到详情页面中,el-menu 没找到对应的path 导致没有高亮的选项。
解决
在router的配置页面
{
path: '/roomIndex',
name: 'RoomIndex',
component: RoomIndex,
meta: { },
},
{
path: '/roomDetail/:roomId',
name: 'Roomdetail',
component: Roomdetail,
meta: {
belong: "/roomIndex"
}
}
// 这里给详情页面上的meta 中添加一个属性
//该熟悉的值保持和列表页面的path一致
并且对 导航栏文件中 el-menu 的配置做修改
<el-menu
....//其他配置项
:default-active="$route.meta.belong ? $route.meta.belong:$route.path"
....
</el-menu>
这样就可以保持页面在详情页面中时,就算导航栏中没有对应的菜单也可以高亮。
本文介绍了一种在Vue项目中解决导航栏高亮显示的方法。通过在路由配置中添加属性并调整el-menu组件的默认激活路径,使得在详情页也能正确高亮相应的菜单项。
5066

被折叠的 条评论
为什么被折叠?



