清除keepalive缓存

Cola-blog

已于 2024-01-31 17:11:55 修改

阅读量468

点赞数 9

分类专栏：前端文章标签：前端 vue.js

于 2024-01-31 17:10:14 首次发布

本文链接：https://blog.csdn.net/lx6091543wwwcctv/article/details/135957805

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用KeepAlive组件实现A页面在B页面返回时保持数据不刷新，同时在跳转到C页面时清除A页面的缓存。详细描述了A页面的beforeRouteLeave钩子函数用于控制缓存操作。

摘要由CSDN通过智能技术生成

背景：

A页面进入B页面，返回A后页面不刷新，保留数据。A页面进入C页面，返回A页面刷新

实现：
对A页面进行keepalive，进入C，清除缓存。

代码：

App.vue页面

 <div id="app">
    <KeepAlive>
      <router-view v-if="$route.meta.KeepAlive"/>
    </KeepAlive>
    <router-view v-if="!$route.meta.KeepAlive"/>
  </div>

route.js

{
  path: "/A",
  name:'A',
  meta: { 
    KeepAlive:true
  },
  component: () =>
      import ('../vue/A'),
},

A页面

beforeRouteLeave(to, from, next) {
      console.log('---beforeRouteLeave')
      if(to.name != 'B'){
        // 清楚缓存
        let Vnode = this.$vnode;
        let parentVnode = Vnode && Vnode.parent;
        if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) {
            var key = Vnode.key == null ? Vnode.componentOptions.Ctor.cid + (Vnode.componentOptions.tag ? `::${Vnode.componentOptions.tag}` : '') : Vnode.key;
            var cache = parentVnode.componentInstance.cache;
            var keys  = parentVnode.componentInstance.keys;
            if (cache[key]) {
                this.$destroy();
                if (keys.length) {
                    var index = keys.indexOf(key);
                    if (index > -1) {
                        keys.splice(index, 1);
                    }
                }
                cache[key] = null;
            }
        }
      }
     
      next()
    },