elementui中导航menu高亮变色问题

elementui中导航menu高亮变色问题


          选项3
  

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

      跳转
      handleClick() {
             this.$router.push({path: '/Rights"});
        }

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


          
          	角色
          
            
          	权限
          
  

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

你可能感兴趣的:(vue)