乐趣区

关于vue.js:vue缓存页面keepAlive的坑数据不刷新只缓存第一次进入的页面数据

需要 :A 进入 B,依据不同 id 刷新 B 页面数据,B 进入 C,C 返回 B,如果 C 有操作数据,则返回 B 后刷新 B 数据,否则 B 页面不刷新;

第一次尝试
* 思路是从 C 进入 B,缓存 B,其余页面进入 B,不缓存

B 页面:

beforeRouteLeave(to, from, next) {
  from.meta.keeplive= false;
  next();},
activated(){// 依据 $route.meta},

C 页面

  // 返回上一页路由不刷新问题
  beforeRouteLeave (to, from, next) {
      to.meta.type=this.showChange;
      to.meta.keeplive = true;
         if(this.edit){to.meta.isrefer=true;// 编辑胜利后刷新 B 页面的数据,状态码}else{to.meta.isrefer=false;}
    next();},

实践上没故障啊,可是问题来了
第一次,A 进 B,B 进 C,C 返回 B,缓存了 B

第二次,A 进 B,B 会刷新,B 再进 C,C 再返回 B,B 的数据是第一次进入 B 的时候的数据

起因:因为 B 的页面参数还是第一次缓存的时候的参数,所以,无论怎么从新加载数据,数据还是原来第一进入的 B 的数据,因为申请的参数素来没有扭转。

解决方案

A 页面

    beforeRouteLeave (to, from, next) { 
                  to.meta.isrefer = true;// 刷新 B 的数据
                  to.meta.type=false;
                next();},

B 页面

  beforeRouteEnter(to, from, next){
      to.meta.keeplive= true;
       next(vm=>{
       // 这里把页面初始值从新赋值,以刷新页面
       if(vm.$route.meta.isrefer){vm.dataList=[];
        vm.$route.meta.isrefer=false;// 复原初始值
        vm.seatList=[]
        vm.query={
                 activityId: vm.$route.query.activityId,
                 meetplaceId: vm.$route.query.meetplaceId,
        }
        vm.getSeatImgList()// 申请数据}
    })
  },
beforeRouteLeave(to, from, next) {
  from.meta.keeplive= true;// 每次进入页面都缓存 B
  next();},

C 页面与下面不变

App.vue

    <router-view v-if="$route.meta.keeplive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keeplive"></router-view>
退出移动版