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