element ui 点击NavMenu 导航菜单 is-active 类名丢失，高亮不显示

最近在开发过程中遇到这样一个问题：点击侧边栏，类名is-active丢失，导致选中当前元素高亮丢失，这里，我用动态绑定class类名，重新给选中元素重新添加颜色。

这里是我对导航菜单进行简单的封装，可以动态的拿到路由，渲染路由数据。

通过$route.name和menu.name比对

<template>
  <div class="main-page">
      <el-menu
        :default-active="activerouter"
        text-color="#fff"
        background-color="#1D61AA"
        class="el-menu-vertical-demo"
        unique-opened="true"
        router
      >
        <template v-for="(menu, index) in sideNavRouter">
          <el-menu-item
            v-if="!menu.children"
            :index="menu.name"
            :class="$route.name === menu.name ? 'is-active' : ''"
            :key="index"
          >
            <span :class="menu.meta.icon ? menu.meta.icon : ''" slot="title">
              {{ menu.meta.title }}</span
            >
          </el-menu-item>
        </template>
      </el-menu>
  </div>
</template>
<script>
export default {
  props: { // 点击头部切换拿到的侧边路由
    sideNavRouter: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    activerouter: function () {
      let _this = this;
      let acve = "";
      acve = _this.$route.name;
      return acve;
    },
  },
};
</script>

选中效果

<style lang="less" scoped>
.is-active {
  color: #409eff !important;
  background: #174e88 !important;
}
</style>