vc-keep-alive不仅仅像App那样前进刷新, 返回销毁

250 阅读1分钟


deepkolos.github.io/vc-keep-ali…

解决的痛点

子路由的更新和父级路由无关, 所以一级路由的缓存 key 是命中路由的父一级路由相关, 目前是父路由的 path + 父子路由相同的 params

还有功能性路由的支持

    比如使用支持返回键的 imgsViewer, 需要 history 压栈而不触发 forward/backward 事件, 所以提供了 ignorePaths 参数
   比如子路由使用 router-view 来渲染, 而是使用 view-pager 来自行控制,
支持左右滑动切换, 如果 view-pager 的页面状态是需要保存到 url, 则需要一级路由的一个动态路由占位符, 充当子路由, 所以提供了 ignoreParams 参数


watch$route/activated/配置一个key不就好了么?

watch$route/activated都是不会重建创建组件, 但是可以响应路由更新, 去重新调用api拉取新数据, 但是想要页面过渡动画就实现不了了

网上也有简单的配置key为$route.path/fullPath, 但是有缺点:

0. 如果仅仅是命中路由的子路由部分变化了, 父路由关联的组件也是会被重新创建, 比如: /page/tab-0 -> /page/tab-1 时, 位于/home的组件也会被重新渲染一次

1. 路由一旦缓存了就只能max来触发清除缓存, 想实现返回销毁的话, 只能通过route hook里面 去判断前进返回, 然后再手动调用instance.$destory(), 但是问题是keepAlive组件的缓存依然没有销毁的标记, 这样的就会导致第一次返回是销毁了, 但是当再次前进到另一个页面的时候, 再返回则会命中的缓存是旧的缓存, 然而该缓存已经destoryed, 后面还是会重新创建一次 

比如: / -> /page-1/0 -> / -> /page-1/0 -> /page-1/1 -> /page-1/0(重新创建了)


所以vc-keep-alive是针对以上问题解决方案的配置打包, 不过现在还没有对addRoutes的支持, 晚点补上