vue使用keep-alive实现页面进步革新,退却缓存,完善运行无bug

vue中,我们偶尔候必要实现这种场景:
1.搜刮页面到列表页面，必要革新重新获取数据。
2.从详情页面返回列表页面必要记着前次欣赏的状态。具体流程如下：

第一步:在路由设置文件中为列表页设置meta参数，内里包罗useCatch和keepAlive
{      path: "/sportPrdtList",      name: "sportPrdtList",      component: resolve => require(["@/views/iceArea/sportPrdtList"], resolve),      meta: {        keepAlive: true,//是否缓存组件        useCatch:false//是否用缓存      }    },第二步:在App文件中如下设置
<keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" />第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回变乱的时间,将leaveTag修改为back,然后在beforeRouteLeave中如下:
beforeRouteLeave (to, from, next) {    if (this.$route.meta && this.$route.meta.keepAlive && this.leaveTag == 'back') {//清空缓存而且将缓存标记(useCatch)置位false          let vnode = this.$vnode    let parentVnode = vnode && vnode.parent;  if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) {    let key = vnode.key == null      ? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `:{vnode.componentOptions.tag}` : '')      : vnode.key;//获取当前实例的key    let cache = parentVnode.componentInstance.cache;//获取keep-alive中的缓存对象    let keys = parentVnode.componentInstance.keys;//获取keep-alive中的key数组    if (cache[key]) {      this.$destroy()//烧毁当前页面实例      if (keys.length) {//删除当前页面的key        let index = keys.indexOf(key)        if (index > -1) {            keys.splice(index, 1)        }      }      cache[key] = null//删除当前页面缓存    }  }      this.$route.meta.useCatch = false    } else {      if (this.$route.meta && this.$route.meta.keepAlive) {//判定原来是否用到keep-alive        this.$route.meta.useCatch = true      } else {//没有缓存直接放行        return next()      }    }    next() },第四步:在列表页的actived生命周期函数中根据useCatch字段判定是否必要缓存:
activated () {    if (!this.$route.meta.useCatch) {      //不消缓存的情况,起首扫除之前缓存的数据然后再获取数据      console.log('不消缓存的情况', this);      this.createdMethods()//created生命周期方法      this.mountedMethods()//mounted生命周期方法    } else {      this.$refs.dataList.scrollTop = this.scrollTop//记载页面滚动高度      console.log('用缓存的情况')    }  },到此竣事