elementui中导航menu高亮变色问题

最新推荐文章于 2025-07-17 16:42:48 发布

原创最新推荐文章于 2025-07-17 16:42:48 发布 · 1.5w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #NavMenu #高亮 #router-link

vue 专栏收录该内容

21 篇文章

订阅专栏

在ElementUI中，解决导航菜单高亮变色问题涉及到`router-link`的使用，以及在路由配置中设置`linkActiveClass`。当页面内有不同路由跳转时，需要修改菜单为`router-link`形式，并去除`.is-active`样式，替换为`.active`或`.router-link-active`。完成这三点改造，即可实现菜单与路由的正确联动高亮。

elementui中导航menu高亮变色问题

<el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
  </el-menu-item-group>

首先看上面这段代码当点击选项3 则跳转也会高亮但是如果某些页面内部写了诸如:

      <el-button @click="handleClick">跳转</el-button>
      handleClick() {
             this.$router.push({path: '/Rights"});
        }

两种不同的路由跳转跳到左侧导航的页面, 左侧导航列表的对应的项应该高亮,怎么才可以高亮
这就涉及到了 linkActiveClass: ‘active’, 在路由那index.js里面配置
还有css样式需要在导航页配置一个.active{} 这是路由跳转的样式或者 .router-link-active{} 这是配置的高亮,还必须干掉原有的.is-active样式(这是elementui提供的)
所以上面代码改装一下

<el-menu-item-group title="分组2">
          <el-menu-item index="/Role">
          	<router-link to:"/Role">角色</router-link>
          </el-menu-item>
            <el-menu-item index="/Rights">
          	<router-link to:"/Rights">权限</router-link>
          </el-menu-item>
  </el-menu-item-group>

代码改装完成,这就可以了,
三点: 1.改装导航成router-link这种形式
2.改装导航样式,干掉原有的.is-active,改写router-link-active的或者.active
3.记得在配置路由的那加上linkActiveClass: ‘active’,或者 linkExactActiveClass: ‘active’,