解决el-menu基于keep-alive路由跳转初始化设置

问题来源：

vue项目页面设置了keep-alive缓存信息来回切换路由组件时再次进入当前页面时初始化设置为“批量抓单”这个菜单栏
在activated生命周期已做修改但是页面渲染还是基于上一次缓存信息渲染详见（bug图）

bug图

image.png

源代码

<el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">批量抓单</el-menu-item>
          <el-menu-item index="2">抓单记录</el-menu-item>
        </el-menu>

解决方法:重新渲染

      <el-menu
          v-if="activeIndex"   //使用v-if重新渲染
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">批量抓单</el-menu-item>
          <el-menu-item index="2">抓单记录</el-menu-item>
        </el-menu>

 // 进入当前界面时执行的生命周期
  activated() {
    this.activeIndex = '1' // 路由跳转设置初始值
  },
  // 离开当前界面时
  deactivated() {
    this.activeIndex = undefined // 设置为undefined重新渲染界面
  },