小叶_01 2022-07-06 16:47 采纳率: 100%
浏览 240
已结题

vue中遇到的缓存清除问题

问题遇到的现象和发生背景
A页面,B页面通过路由管理打开了,做切换动作,这时候B页面被KeepAlive缓存了,来回切换,B页面缓存很成功,A页面未做缓存操作,这时候A页面中有个按钮(带着条件),点击跳转B页面,需要清除B页面的缓存,然后A,B页面切换,B页面是缓存的最新的

运行结果

img

从一个非缓存界面跳转到一个缓存界面,在组件路由设置keepalive为false,离开这个页签后,再返回这个页签,是上上次打开的缓存

我想要达到的结果
可以直接用首页按钮打开界面的缓存覆盖第一次缓存,或者第一次缓存在点击首页按钮的时候清除

** 问题相关代码**

import Vue from 'vue'
import {setStore, getStore} from '@/utils/storage'
import store from './store';
Vue.mixin({
  beforeRouteEnter: function (to, from, next) {
    if(!to.path.includes('detail')&&to.path!='/normal/occupation'&&to.path!='/normal/ltc'&&to.path!='/authority/frontPageMgmt'
      &&!to.path.includes('wel')
      &&to.path!='/saber/payment'
      &&to.path!='/saber/submitVoucher'
      &&to.path!='/saber/orderDetail'
      &&to.path!='/system/apvl-proc-config/index'
      && to.path != '/normal/flow/step'
    ) {
      to.meta.keepAlive = true
    }
    if(to.params&&to.params.from&&(to.params.from=='first'||to.params.from=='fealther')) {
      to.meta.keepAlive = false
    }
    next(() => {
      let avueView = document.getElementById('avue-view');
      if (avueView && to.meta.savedPosition) {
        avueView.scrollTop = to.meta.savedPosition
      }
    })
  },
  beforeRouteLeave: function (to, from, next) {
    console.log(this)
    let avueView = document.getElementById('avue-view');
    if (from && from.meta.keepAlive) {
      if (avueView) {
        from.meta.savedPosition = avueView.scrollTop
      }
      const result = this.$route.meta.keepAlive === true && store.state.tags.tagList.some(ele => {
        return ele.value === this.$route.fullPath;
      });
      if (this.$vnode && !result) {
        from.meta.savedPosition = 0
        if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
          if (this.$vnode.componentOptions) {
            let key = this.$vnode.key == null
              ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
              : this.$vnode.key;
            let cache = this.$vnode.parent.componentInstance.cache;
            let keys = this.$vnode.parent.componentInstance.keys;
            if (cache[key]) {
              if (keys.length) {
                let index = keys.indexOf(key);
                if (index > -1) {
                  keys.splice(index, 1);
                }
              }
              delete cache[key];
            }
          }
        }
      }
    }
    //按钮清缓存
    if(getStore({name: 'clearTag'})){
      if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
        if (this.$vnode.componentOptions) {
          let key = this.$vnode.key == null
            ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
            : this.$vnode.key;
          let cache = this.$vnode.parent.componentInstance.cache;
          let keys = this.$vnode.parent.componentInstance.keys;
          if(keys.length>0){
            //删除所有,清除缓存
            if(getStore({name: 'clearTag'})=='all'||getStore({name: 'clearTag'})=='cache'){
              Object.keys(cache).forEach((item)=>{
                console.log("item",item,keys,key)
                if(cache[item]){
                  delete cache[item];
                }
              })
              this.$vnode.parent.componentInstance.cache = {};
              this.$vnode.parent.componentInstance.keys = []
            }else{
              //关闭其他
              Object.keys(cache).forEach((item,i)=>{
                if(cache[item]&&key!=item){
                  delete cache[item];
                  keys.splice(i, 1);
                }
              })
            }
          }
        }
      }
      setStore({name: 'clearTag', content: ''})
    }
    next();
  },
});

  • 写回答

3条回答 默认 最新

  • 前端不释卷leo 前端领域新星创作者 2022-07-06 16:58
    关注

    我可以这么理解吗?如果点击首页跳转进来的,就不缓存,如果点击页签进来的,就缓存。
    如果是我上面所理解的那样,那可以这么做:
    首先,你需要在keep-alive添加两个属性,include和exclude,且是v-bind修饰的,即:include与:exclude,绑定路由跳转过来所带的的某个标志,如果是路由跳转过来的,即点击首页过来的,那就让exclude绑定B组件的名字,否则就为空。
    同理,如果是点击页签进来的,那就让include绑定B组件的名字,否则就为空。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月15日
  • 已采纳回答 7月7日
  • 修改了问题 7月6日
  • 创建了问题 7月6日

悬赏问题

  • ¥15 cocos的js代码调用wx.createUseInfoButton问题!
  • ¥15 关于自相关函数法和周期图法实现对随机信号的功率谱估计的matlab程序运行的问题,请各位专家解答!
  • ¥15 Python程序,深度学习,有偿私
  • ¥15 扫描枪扫条形码出现问题
  • ¥35 poi合并多个word成一个新word,原word中横版没了.
  • ¥15 【火车头采集器】搜狐娱乐这种列表页网址,怎么采集?
  • ¥15 求MCSCANX 帮助
  • ¥15 机器学习训练相关模型
  • ¥15 Todesk 远程写代码 anaconda jupyter python3
  • ¥15 我的R语言提示去除连锁不平衡时clump_data报错,图片以下所示,卡了好几天了,苦恼不知道如何解决,有人帮我看看怎么解决吗?