美文网首页
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