首先，这是vue的官方文档 KeepAlive | Vue.js (vuejs.org)
KeepAlive组件能够保存当前组件状态，在进行路由跳转时变为【不活跃状态】而非卸载。但是官方并没有提供清除缓存的方法（除了刷新页面，整体重建）
假设以下是我们路由&对应组件的代码
<router-view v-slot="{Component}">
<KeepAlive :include="keepArr">
<component :is="Component"/>
</KeepAlive>
</router-view>
需要注意的是，keepalive如果不绑定【缓存数组】的话，将会默认缓存所有组件，这将会占用较大内存；
可以考虑使用"max"属性， 即 :max="number" ，当缓存组件数量超过设定的number个数时，会自动销毁最先进入缓存的组件；
但是这样不太方便，所以这里使用 include 属性，绑定缓存组件名数组。
该数组为动态引用，所以请勿在data中定义，而是要computed中作为计算属性绑定其他动态变化值。
以我的项目为例，大致结构如下
<div>
<el-tabs ……>
<el-tab-pane>……</el-tab-pane>
</el-tabs>
<router-view v-slot="{Component}">
<KeepAlive :include="keepArr">
<component :is="Component"/>
</KeepAlive>
</router-view>
</div>
点击相应菜单时，新增对应的tab标签（若是已有则切换过去）然后跳到对应路由下的组件。
在已激活的tab间切换时自然是保留着缓存，当关闭标签页时，清除当前组件缓存（或者你可以自定义触发方式，只要能获取到需要清除组件的组件名 "name"）
showTabs是已激活的tab数组，内部存储的有当前tab对应的路由，组件名，以及tab自身的标签名等。
computed: { keepArr() { let temp = this.showTabs.map(item => { return item.name }) return [...temp] } },
为了确保该缓存能够正确生效，请在路由中确保该组件的’name‘与组件内的属性’name‘相同，否则将无法识别需要缓存的组件
