前言

今天测试报告了广告竞价后台的一个bug:

大致原因是这样：
先看下element对于导航的每一项的点击的处理方式。

handleItemClick(item) {
  let { index, indexPath } = item;
  if (!this.router) {
    this.activeIndex = item.index;
  }
  this.$emit('select', index, indexPath, item);
  if (this.mode === 'horizontal' || this.collapse) {
    this.openedMenus = [];
  }
  // 只是检测当前router是否存在
  if (this.router) {
    this.activeIndex = this.$route.path;
    this.routeToItem(item);
  }
}

可以看到element对于activeIndex值能否被赋值当前路由路径（this.$route.path）仅仅只检测this.router是否存在，也就是说路由在开始跳转的一瞬间，active值就已经被赋值为当前的路由路径，至于之后跳转是否完成element不会再做处理。
如果一个组件内添加了beforeRouteLeave这样的组件内导航钩子，就有可能原先的路由跳转会被取消掉，页面停留在原页面，而这个时候activeIndex已经被修改，被点击的那个导航会加上is-active类，原先的那个页面的导航会去掉is-active类，这就出现上面那个bug。

解决方法

出现问题基本都是无独有偶，这个是个歪果仁提的element issue。然而很可惜，我找到这个issue并未提供任何的解决方案。只能靠自己了~

其实思路换一下就好了，在当前路由下给对应的导航加上active类本身不是什么很难的事，既然用element会有bug，那不如不用它的，自己去实现这块的功能。
首先删除原来写在<el-menu></el-menu>标签上的:default-index="onRoutes"属性，对于每个<sub-menu></sub-menu>动态去定义它的active类

<el-menu :default-openeds="onRouteKeys" class="el-menu-style" router :collapse="sidebar.collapsed && !device.isMobile" @select="handleSelect">
  <template v-for="item in menuList">
    <sub-menu :param="item" :class="{'is-active2': onRoutes === item.href}"></sub-menu>
  </template>
</el-menu>

为了避免和element默认的is-active类出现样式冲突，这里将is-active类重命名为”is-active2”，然后自己写css去定义active导航的样式

.main-sidebar .el-menu-item.is-active2 {
  color: #fff !important;
}
.main-sidebar .el-menu-item.is-active2 .iconfont{
  color: #fff !important;
}
.main-sidebar .el-menu-item.is-active2 .icon-jiantou {
  visibility: visible;
}

这样因为每次都是去判断当前路由是否和item.href相同，也就是当路由没有正真跳转的时候is-active2的类所在的导航就会不会变，就是如此~