vue keepalive 路由守卫 生命周期等问题

页面在router.js中配置好keepalive:true之后。首次进入需要路由守卫的页面,通过打印生命周期执行created->mounted->activated,退出时触发deactivated。

如果跳转的页面没有进行路由守卫的话,想要缓存的页面还是会走destroyed生命周期。导致每次重返页面还是会created,再到以上。

正确的做法应该是两个页面在beforeRouteLeave的周期中条件判定路由信息,进而进行条件控制keepalive

    if(to.path == '/receiveOrderDetail'){
      // console.log(from)
      to.meta.keepAlive = true
      from.meta.keepAlive = true
    }

beforeRouteEnter生命周期进行判断,然后再走类似created的生命周期,再到activated

    next((ret) => {
      if (from.path == "/damn") {
        ret.getDate();
      }
    });

离开页面时使用 deactivated

总结

简单言之就是自己找问题,通过打印所有的生命周期来找到问题。
两个目标页面都要进行路由守卫的控制,从而达到keepalive缓存的效果,否则塔们直接把页面直接给你销毁咯。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容