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

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

###源代码
```
<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重新渲染界面
},
```

原文地址:https://www.cnblogs.com/zhonglinfeng666/p/13370775.html