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

 生命周期执行顺序:

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); 

         }

       }

     }

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

推荐阅读更多精彩内容

  • 1.css只在当前组件起作用答:在style标签中写入scoped即可 例如: 2.v-if 和 v-show 区...
    小棋子js阅读 3,584评论 0 0
  • 001、v-show与v-if的区别 v-show:操作的是元素的display属性v-if:操作的是元素的创建和...
    汶沐阅读 4,320评论 1 14
  • Vue Vue是一个前端js框架,由尤雨溪开发,是个人项目 Vue近几年来特别的受关注,三年前的时候angular...
    hcySam阅读 2,224评论 0 0
  • 基础部分 模版语法 1.computed和watch的区别 计算属性computed :支持缓存,data数据不变...
    王蕾_fd49阅读 3,736评论 0 0
  • 1.在keep-alive中直接添加 include,cachedViews(Array类型:包含vue文件的组件...
    曾经也是个少年阅读 11,019评论 0 1