element页面点击跳转，菜单导航栏也高亮

最新推荐文章于 2024-10-04 19:52:16 发布

plusyyyy

最新推荐文章于 2024-10-04 19:52:16 发布

阅读量2.2k

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/plusyyyy/article/details/115863290

版权

1.在el-menu里加上:default-active="onRoutes"

<el-menu
        class="el-menu-vertical-admin"
        :default-active="onRoutes"
        :unique-opened="true"
        :router="true"
        background-color="#fff"
        text-color="#909399"
        active-text-color="#409eff"
        @select="select"
      >
      
        <leftMenu :menus="menuList" />
      <!-- <el-menu-item  index="99">
          <i class="el-icon-refresh"></i>
          <span slot="title">退出登录</span>

      </el-menu-item> -->
 </el-menu>

`2.在computed写上这个方法

 computed: {
    onRoutes() {
      const route = this.$route
      const { meta, path } = route
      // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      // meta中 有activeMenu 字段的页面，都会显示高亮
      console.log(meta)
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  
  },

3.在route文件里，加上meta{activeMenu:‘要高亮的路径’}

  {
      path: '/alarmManage/alarmManage',
      name: 'alarmManage',
      component: alarmManage,
      meta: {
        title: '预警管理',
        requireAuth: true
      }
    },
    {
      path: '/alarmManage/alarmManageDetails',
      name: 'alarmManageDetails',
      component: alarmManageDetails,
      meta: {
        title: '预警详情',
        requireAuth: true,
        activeMenu:'/alarmManage/alarmManage' //要高亮的path
      }
    },