美文网首页随机收藏react & vue & angular学习
vue使用keep-alive实现页面前进刷新,后退缓存,完美运

vue使用keep-alive实现页面前进刷新,后退缓存,完美运

作者: Yesterday丶 | 来源:发表于2022-07-12 11:18 被阅读0次

    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('用缓存的情况')
        }
      },
    

    到此结束

    相关文章

      网友评论

        本文标题:vue使用keep-alive实现页面前进刷新,后退缓存,完美运

        本文链接:https://www.haomeiwen.com/subject/fzzobrtx.html