antd vue 刷新页面保留当前页面路由,保留menu选中菜单，浏览器导航栏回退时，menu子菜单会有多个选中状态的处理

antd vue 刷新页面保留当前页面路由,保留menu选中菜单，网上搜到一篇说的比较详细的博客，文章链接。
本身项目中菜单有两级，正常操作选中菜单后，刷新页面会保留当前选中菜单，但是在点击浏览器搜索栏的回退箭头后，回退页及回退前的路由页面的菜单选中状态都会保留，这不是理想状态啊啊啊。打印发现，回退时控制选中类名的方法返回的是false，但是页面仍然渲染了选中样式，解决思路：当控制选中类名的方法返回的是false时，定义一个类名（未选中状态样式），代码如下：

<template v-for="item in menu">
      <el-menu-item
        v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
        :index="item[pathKey]"
        :key="item[labelKey]"
        :class="{'is-active':vaildAvtive(item), 'is-not-active': !vaildAvtive(item) }"
        @click="open(item)"
      >
        <i :class="item[iconKey]" />
        <span slot="title" :alt="item[pathKey]">{{ item[labelKey] }}</span>
      </el-menu-item>
      <el-submenu
        v-else-if="!validatenull(item[childrenKey]) && vaildRoles(item)"
        :index="item[pathKey]"
        :key="item[labelKey]"
      >
        <template slot="title">
          <i :class="item[iconKey]" />
          <span
            slot="title"
            :class="{ 'el-menu--display': collapse && first }"
            >{{ item[labelKey] }}</span
          >
        </template>
        <template v-for="(child, cindex) in item[childrenKey]">
          <el-menu-item
            v-if="validatenull(child[childrenKey])"
            :index="(child[pathKey], cindex)"
            :class="{'is-active':vaildAvtive(child) ,'is-not-active': !vaildAvtive(child) }"
            :key="child[labelKey]"
            @click="open(child)"
          >
            <i :class="child[iconKey]" />
            <span slot="title">{{ child[labelKey] }}</span>
          </el-menu-item>
          <sidebar-item
            v-else
            :menu="[child]"
            :key="cindex"
            :props="props"
            :screen="screen"
            :collapse="collapse"
          />
        </template>
      </el-submenu>
    </template>

    vaildAvtive(item) {
      const groupFlag = (item["group"] || []).some((ele) =>
        this.$route.path.includes(ele)
      );
      return this.nowTagValue === item[this.pathKey] || groupFlag;
    },
    open(item) {
      if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
      this.$router.$avueRouter.group = item.group;
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: item[this.labelKey],
          src: item[this.pathKey],
        }),
        query: item.query,
      });
    }

 .el-menu-item.is-not-active,
   .el-submenu__title.is-not-active{
     background-color:#fff;
     i,
     span {
       color: #666;
     }
   }