keepAlive缓存页面数据

如果bbb页面只有一个数据源，第一种就挺好用，但是我忘了这个页面有好几个功能。根据$router.query.type显示了好几个表格。。。 退出重进还显示之前$router.query.type的内容

一、

router.js 

{
  path: '/bbb',
  name: 'bbb',
  component: bbb,
  meta: {
    keepAlive: true, 
  }
},

bbb.vue

beforeRouteEnter(to, from, next) {
    if(from.name === "ccc") { //如果是从ccc页面返回的
      to.meta.isBack = true //标识
    }
    next();
  },
  activated(){ //组件每次被加载到页面中都执行的生命周期(包括后退)
    if (this.$route.meta.isBack) {
      this.searchUser() //发请求 做处理
    }
    this.$route.meta.isBack = false //请求完后进行初始化
  },

二、

找到了这个好用，但也有问题第二次不缓存了。因为它 this.$destroy() 最简单还是换成刷新

解决keepAlive缓存bug_keepalive bug_一只正在成长的程序猿的博客-CSDN博客vue keepAlive移除缓存(代替this.$destroy())需求注册页面有一个，点击去查看协议的入口，此时当客户填写了数据，从协议页面回来之后数据就会清空，所以我选择了用keepAlive，但是用第一种方式发现缓存的始终都是第一次填写的东西，如果用this.$destroy()就再也不能缓存了，所以经过多方探查，用了第二种方案完美解决。router.jsimport Vue..._keepalive bughttps://blog.csdn.net/weixin_44251396/article/details/97389185

  beforeRouteLeave(to, from, next) {
    if (to.name === "ccc") {
      from.meta.keepAlive = true;
      next();
    }
    else {
      from.meta.keepAlive = false;
      this.$router.go(0)
      // this.$destroy()
      next();
    }
  },
  activated(){
    if(this.$route.meta.keepAlive){
      this.searchUser()
    }
  },

 有条件也可以换种刷新方式

vue2页面刷新_vue2刷新页面_渣渣灰飞的博客-CSDN博客vue页面刷新_vue2刷新页面https://blog.csdn.net/flhhly/article/details/128788998