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

你可能感兴趣的:(vue keepalive 路由守卫 生命周期等问题)