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