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博客