解决菜单不随路由改变而高亮 active-text-color

问题场景：

想要点击菜单时，该菜单显示不同的颜色效果

给el-menu 组件加了 active-text-color 属性后，效果基本可以

<el-menu
...
text-color="#fff"
active-text-color="#409EFF"
>
...
</el-menu>

如下图： 

 

但是， 当我手动更改了路由，跳转到另一个页面时，他的高亮显示并没有随之改变

所以，这个不好的体验得修修

解决办法： 

拿到当前激活的菜单路由（我这里是index字符串表示路由）

default-active

当前激活菜单的 index

string

—

—

 

给el-menu 组件加一个select事件

select

菜单激活回调

index: 选中菜单项的 index, indexPath: 选中菜单项的 index path

代码如下： 

<el-menu
    :default-active="$route.path"
    ...
    text-color="#fff"
    @select="handleSelect"
    active-text-color="#409EFF"
></el-menu>
// ....
data () {
  return {
    // ...
    activeIndex: ''
  }
},
watch: {
  $route () {
    this.handleSelect(this.activeIndex)
  }
},
methods: {
  // ...
  handleSelect (index) {
    this.activeIndex = index
  }
}

这样就 ok 啦~