业务需求:后台管理快捷菜单功能,当关闭某个路由时,keep-Alive缓存重置
![](https://i-blog.csdnimg.cn/blog_migrate/bd9b26403008e2e76a4dc6d91293a81c.png)
我们可以通过控制路由里的meta.keepAlive状态来控制是否缓存,但是当我们多个详情页指向同一路由时,这个方法便不可行,因为一旦控制了组件的keepAlive状态,我们所有指向同一组件都会受到影响,显然不符合我们的需求。
解决方法
<keep-alive>
<router-view ref="keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
// 直接在keepAlive添加refs无法找到 我们可以把ref加在router-view上 通过$vnode.parent可以找到
let cacheList=this.$refs.keepAlive.$vnode.parent.componentInstance.cache
console一下cacheList
![](https://i-blog.csdnimg.cn/blog_migrate/507a1ad51d747cf3bab11cb2fe0dbe4d.png)
这样如果重置某个页面,我们便可以delete 某个key值就可以了
注意:如果当页面进入离开添加transition动画时,key值会变化。
解决方法:
如果路由切换时加了transition,这时候我们可以正则匹配__transition-***内容
let str = Object.keys(this.$refs.keepAlive.$vnode.parent.componentInstance.cache)
if (str.length != 0) {
const reg = /^__transition-(\d+)-\/.*$/;
const match = str[0].match(reg);
this.cacheCharacterNum = match ? match[1] : null;
}
打印cacheCharacterNum
这个时候我们在进行key对比删除就可以。
完整代码:
cacheCharacter() {
// 匹配路由地址跟动画之前的数字 以防每次刷新时key里面的数字不同 导致无法找到对应的key值
let str = Object.keys(this.$refs.keepAlive.$vnode.parent.componentInstance.cache)
if (str.length != 0) {
const reg = /^__transition-(\d+)-\/.*$/;
const match = str[0].match(reg);
this.cacheCharacterNum = match ? match[1] : null;
}
},
closeOther() {
// 删除keepAlive缓存数据
this.cacheCharacter()
let fullPath =`__transition-${this.cacheCharacterNum}-${_this.$route.fullPath}`
let cacheList = this.$refs.keepAlive.$vnode.parent.componentInstance.cache
for (const key of Object.keys(cacheList)) {
if (key !== fullPath) {
delete this.$refs.keepAlive.$vnode.parent.componentInstance.cache[key]
}
}
},