Keep-alive 可以缓存多层级别的子路由的页面吗
发布于 8 个月前 作者 feer 617 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
事故场景:

A ---页面
  router-view
  B --- A页面中的路由组件中的页面
  C --- A页面中的路由组件中的页面
    router-view
    E ---- C页面中的router-view 组件中的页面 ---- A页面路由的子路由中的页面
    F ---- C页面中的router-view 组件中的页面 ---- A页面路由的子路由中的页面
      router-view
      G  ---- F页面中的router-view 组件中的页面
      H  ---- F页面中的router-view 组件中的页面
      I  ---- F页面中的router-view 组件中的页面

问题描述:
   A页面的路由做缓存配置
   <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>


G H I 三个子子路由中的页面,同时设置meta:{ keepAlive: true} 结果三个页面同时不不能被缓存,
activated不被执行,全部执行了created 和 mounted。各位大大有什么好的思路解决这个问题吗
3 回复

是只能缓存一级,你要再加一个keep-alive在要缓存的地方

我也遇到同样问题了
这要分块来讨论的
1.组件页面缓存
2.组件页面间通讯
3.组件页面刷新重置
第1的问题我是使用keep-alive的include来解决的。首先路由的name要跟组件的name一直。每次打开都会缓存目标组件的name(用了路由的name),对于三层或以上的嵌套路由的目标组件,会把它的父组件name都加进去include的数组中,这样嵌套无数级都能缓存
第2的问题我是来解决 比如添加完商品然后商品列表要刷新的问题。我通过bus订阅发布的模式,先在keep-alive的组件订阅一个刷新事件,其他页面发布一个刷新事件时,把缓存的目标组件的名称,方法和参数传过来,我再在keep-alive的子组件找到它,并执行方法
第3的问题我还没想到方法解决,因为要重新加载一个嵌套的页面,必须吧这个页面以上缓存的父组件都移除缓存列表,这样会造成其他引用了这些父组件的页面都失去缓存了。
所以3级或以上嵌套路由页面缓存和刷新的功能我暂时觉得不能并存额

你好,你的问题解决没,我也有同样的问题。

回到顶部