ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示

最新推荐文章于 2024-06-11 17:08:06 发布

張三同学

最新推荐文章于 2024-06-11 17:08:06 发布

阅读量4.3k

点赞数 9

分类专栏：前端文章标签： elementui vue.js

本文链接：https://blog.csdn.net/weixin_46535880/article/details/120661090

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原因：当路由地址发生变化时，想要对应的高亮显示的菜单项发生变化，只需要设置 :default-active="$route.path"即可，但是当跳转的路由(父路由)包含子路由(即包含另一个导航时)，且父路由设置了默认显示的子路由，此时父路由对应的菜单项就无法正常高亮显示，因为父路由设置了默认显示的子路由，当前路由地址就变成了子路由的地址，而菜单项高亮显示的路由对应的路由地址为父亲路由，而不是子路由所以无法高亮显示，简单来说本来 /aaa 应该高亮显示菜单项，但现在实际的路由地址为 /aaa/bbb，所以无法高亮显示。
在这里插入图片描述

解决方法一：计算属性+$route.path+meta属性

① 在子路由中添加meta属性，设置需要高亮显示的路由地址

routes: [
  {
    path: '/aaa',
    component: AAA,
    redircct:'/aaa/bbb'
    children: [
      {
        path: 'bbb',
        component: BBB,
        meta: {
          activeMenu: '/aaa'
      }
    ]
  }
]

② 将default-active的值设置为计算属性

<el-menu
       class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#0e0d0a"
      unique-opened
      :router="true">
</el-menu>

③ 在计算属性中判断路由是否有meta属性，如果有则返回meta属性中设置的高亮显示的路由地址，如果没有则返回$route.path

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

方法二：非添加meta属性

将default-active的值设置为计算属性，然后在计算属性中直接判断 $r o u t e . p a t h 是否是以 / x x x 开头的 (/ x x x 是父路由的路由地址) ，如果是以 / x x x 开头的则返回对应的 / x x x, 否则返回$ route.path

<el-menu
       class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#0e0d0a"
      unique-opened
      :router="true">
</el-menu>

activeMenu() {
      // 获取path地址
      const path = this.$route.path
      // 判断path地址是否是以/xxx开头的(/xxx 为对应显示的一级路由的导航的路由地址)
      if (path.startsWith('/tools')) {
        // 如果是则返回一级路由的导航的路由地址
        return '/tools'
      }
      return path
    }