Vue keep-alive + el-tab路由切换的正确用法

Vue要实现站点的多Tab切换，百度了一下Vue keep-alive，出来的结果大部分是这样的。

<keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive>

<router-view v-if="!$route.meta.keepAlive" />

看似没有什么问题，但真正使用的时候会产生奇怪的问题，当从缓存的页面切换到其它页面时，缓存页面的created,ativated会重新运行。问题就出现在v-if，会使页面删除导致页面重新执行生命周期函数。

第一个写这个出来的人对router-view应该是不完全理解，一个页面应该只有一个router-view就够了，路由会自动加载，所以上面的代码应写成<keep-alive :include="cacheviews"> <router-view></router-view> </keep-alive>。cacheviews为keep-alive的一个属性，类型为['a', 'b']，指定数组内的名称的组件被缓存，例如上面指定a,b组件被缓存。这个名称是组件的名称，不是路由定义的名称，如下图，我使用的是TS(typescript)语法，即为类名，非TS自行对应。

 缓存数组的定义，如上面定义的cacheviews，一般使用vuex的state全局变量来维护，再配合Vue路由守卫控制cacheviews数组的动态添加、删除，使用方法文章https://blog.csdn.net/qq_50906507/article/details/128208013，进入路由后添加缓存，tab关闭后删除缓存。

哪些路需要缓存可以通过设置路由的meta属性来区分，这里存放的是路由的自定义数据，在页面上可以通过$route.meta来读取。网上也有正确的使用文章，链接Vue 通过keep-alive缓存Tab页面_JA+的博客-CSDN博客