vue-router meta（2）页面进入详情页面时，无子项导航栏时，该菜单未高亮。

最新推荐文章于 2024-04-01 11:16:40 发布

原创最新推荐文章于 2024-04-01 11:16:40 发布 · 805 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在Vue项目中解决导航栏高亮显示的方法。通过在路由配置中添加属性并调整el-menu组件的默认激活路径，使得在详情页也能正确高亮相应的菜单项。

原因

管理系统，左侧导航栏有个单级的菜单（无子一级的菜单），进入后页面显示的是具体的房间列表。点击具体的房间可以进入房间详情页面，展示具体的房间数据。这时页面路由发生变化。发现，导航栏中不存在高亮的选项。

进入导航栏页面

<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>

这样就可以保持页面在详情页面中时，就算导航栏中没有对应的菜单也可以高亮。