美文网首页
vue使用keep-alive缓存页面,返回页面时刷新部分数据

vue使用keep-alive缓存页面,返回页面时刷新部分数据

作者: 小怪兽出没_86e0 | 来源:发表于2021-11-16 16:07 被阅读0次

 生命周期执行顺序:

1、不使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> destroyed

2、使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> activated --> deactivated

3、使用keep-alive,并且再次进入了缓存页面的情况:beforeRouteEnter -->activated --> deactivated

在keep-alive页面里的activated 监听路由的参数变化可以实现全页面刷新,

 "$route.query.type": function name(paidrams) {

       if (this.$route.path === "当前的路径") {

         console.log("上次id", this.policyId, "本次id", this.$route.query.id);

         if (this.policyId != this.$route.query.id||this.pageType!= this.$route.query.type) {

           console.log("路由参变化"); 

             this.getDetail();

         }

       }

     },

   $route: {

       handler: function (val, oldVal) {

         if (val.path === "当前的路径") {

           console.log("监听路由变化", val, oldVal); 

         }

       }

     }

相关文章

网友评论

      本文标题:vue使用keep-alive缓存页面,返回页面时刷新部分数据

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