美文网首页
vue keepalive 路由守卫 生命周期等问题

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

作者: 科技鲨鱼TechShark | 来源:发表于2020-12-09 16:44 被阅读0次

    页面在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缓存的效果,否则塔们直接把页面直接给你销毁咯。

    相关文章

      网友评论

          本文标题:vue keepalive 路由守卫 生命周期等问题

          本文链接:https://www.haomeiwen.com/subject/fhwhgktx.html