elementui中导航menu高亮变色问题

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