清除vue的keep-alive的页面内指定页面的缓存

最新推荐文章于 2023-05-11 20:31:28 发布

bangleilei

最新推荐文章于 2023-05-11 20:31:28 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签：缓存 vue.js html

本文链接：https://blog.youkuaiyun.com/banglei123/article/details/120285277

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文探讨了在Vue中使用keep-alive实现页面切换时数据保留的问题，如何通过beforeRouteLeave钩子函数清除特定页面缓存，并介绍了在main.js中添加混入以全局管理缓存的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需求背景

自定义页面的tab 类似chrome浏览器的标签页页，如图

切换要求为

1、打开的页面切换要保留页面上的数据如：页面的搜索条件选项和表格数据等。

2、关闭页面再打开时需要重新加载页面。

2.出现问题

使用keep-alive 缓存子页面，确实可以达到需求 1 的要求，但是关闭了这个页面在打开的话页面缓存依然存在。

3.解决方案

1.查找了keep-alive的清除缓存的方案，发现官方并没有提供相关方法。所以先想到的是，重新打开页面链接后面增加一个随机数的参数。但是需要区分链接从哪打开的，以及是否新打开标签页等逻辑判断，故放弃此方案，继续寻找keep-alive的清除缓存的方案。

2.在页面里可以获取到，注意！！！（这两个参数只能在路由的钩子函数里获取到）

let cache = this.$vnode.parent.componentInstance.cache // 缓存的组件
let keys = this.$vnode.parent.componentInstance.keys // 缓存的组件名

所以这个处理放到了 beforeRouteLeave 函数里，当页面离开是判断是通过点击关闭按钮离开的，然后清楚这个页面的缓存。

另一个问题：需要在每个页面增加 beforeRouteLeave。所以在main.js 里加了混入

具体代码如下（删除了业务相关逻辑）

Vue.mixin({
    beforeRouteLeave(to, from, next) {
        // 存在关闭key 则清除缓存
        let key = targetClosePath
        let cache = this.$vnode.parent.componentInstance.cache // 缓存的组件
        let keys = this.$vnode.parent.componentInstance.keys // 缓存的组件名
        if (cache[key] !== null) {
            delete cache[key]
            let index = keys.indexOf(key)
            if (index > -1) {
               keys.splice(index, 1)
            }
        }
        next()
    }
})