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

分手后的思念是犯贱 2022-09-11 07:27 439阅读 0赞

### 1.需求背景 ###

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmFuZ2xlaWxlaQ_size_19_color_FFFFFF_t_70_g_se_x_16][]

切换要求为

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()
        }
    })

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmFuZ2xlaWxlaQ_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6444ace36ecd45b9823ac5b4432a1f03.png