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

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