javascript
<template>
<div id="app">
<!-- <keep-alive>
<router-view v-if="$route.meta.noCache"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.noCache"></router-view> -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="fullPath"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
computed: {
fullPath() {
// console.log(this.$route.fullPath);
return this.$route.fullPath
}
},
mounted() {
// 注册监听全局的clearKeepAlive方法,可在其他组件中触发此方法
this.$bus.$on('clearKeepAlive', this.clearKeepAlive)
// 使用
// this.$bus.emit("clearKeepAlive", path); // 清除缓存
},
methods: {
// 根据fullUrl清除keepAlive
clearKeepAlive(fullUrl) {
// console.log('bus触发要清除的keepAlive', fullUrl);
this.$children.forEach((item) => {
if (item.$vnode.data.key == fullUrl) {
console.log(item.$vnode.data.key)
this._myDestory(item)
}
})
},
// 封装清除某个组件的keepAlive状态,并销毁
_myDestory(keepAliveComponent) {
// 你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。
if (keepAliveComponent.$vnode && keepAliveComponent.$vnode.data.keepAlive) {
if (
keepAliveComponent.$vnode.parent &&
keepAliveComponent.$vnode.parent.componentInstance &&
keepAliveComponent.$vnode.parent.componentInstance.cache
) {
if (keepAliveComponent.$vnode.componentOptions) {
var key =
keepAliveComponent.$vnode.key == null
? keepAliveComponent.$vnode.componentOptions.Ctor.cid +
(keepAliveComponent.$vnode.componentOptions.tag
? `::${keepAliveComponent.$vnode.componentOptions.tag}`
: '')
: keepAliveComponent.$vnode.key
var cache = keepAliveComponent.$vnode.parent.componentInstance.cache
var keys = keepAliveComponent.$vnode.parent.componentInstance.keys
if (cache[key]) {
if (keys.length) {
var index = keys.indexOf(key)
if (index > -1) {
keys.splice(index, 1)
}
}
delete cache[key]
}
}
}
}
keepAliveComponent.$destroy()
},
reload() {
this.ifRouterAlive = false
this.$nextTick(() => {
this.ifRouterAlive = true
})
}
}
}
</script>
<style lang="scss" scoped></style>