项目开发中在用户从菜单列表页(List)进入详情页(Detail)需保存List的《当前页数、每页条数......》状态。
因此使用了keep-alive组件,原始代码如下,需要缓存的页面设置meta.KeepAlive为true。
<keep-alive v-if="$route.meta.KeepAlive">
<router-view/>
</keep-alive>
<router-view v-if="!$route.meta.KeepAlive"/>
可是后来却发现,进入Detail后返回List页面没有被缓存,仍然是每次调用mount函数。
于是发现了一个坑:
<keep-alive v-if="$route.meta.KeepAlive">
这种写法导致每次进入无需缓存的页面时,keep-alive没有通过条件判断、被销毁。因此每次从无需缓存的页面回来,需要缓存的页面只能被重新创建。
最终,修改成了正确的写法:
<keep-alive>
<router-view v-if="$route.meta.KeepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.KeepAlive"/>
记录下评论说的include和exclude使用:
https://blog.youkuaiyun.com/qq_35220376/article/details/89879463