<template>
|
<div @click="foldFun" style="height: 100%;">
|
<keep-alive ref="keepAlive">
|
<router-view v-if="shouldCacheView" :key="routeCacheKey" />
|
</keep-alive>
|
<router-view v-if="!shouldCacheView" :key="$route.fullPath" />
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
name: 'AppContent',
|
data() {
|
return {
|
}
|
},
|
computed: {
|
...mapState(['tagList', 'cachePruneRequest']),
|
activeTag() {
|
return this.tagList.find(tag => {
|
const fullPath = tag.fullPath || this.$router.resolve({
|
path: tag.path,
|
query: tag.query || {}
|
}).route.fullPath
|
return fullPath === this.$route.fullPath
|
})
|
},
|
shouldCacheView() {
|
return Boolean(this.$route.meta.keepAlive || this.$route.meta.hide)
|
},
|
routeCacheKey() {
|
return this.activeTag && this.activeTag.cacheKey
|
? this.activeTag.cacheKey
|
: (this.$route.query._view || this.$route.fullPath)
|
}
|
},
|
watch: {
|
cachePruneRequest(request) {
|
if (request && request.keys) {
|
request.keys.forEach(key => this.pruneCacheEntry(key))
|
}
|
}
|
},
|
methods: {
|
pruneCacheEntry(key) {
|
const keepAlive = this.$refs.keepAlive
|
if (!keepAlive || !keepAlive.cache || !keepAlive.keys) return
|
|
const cached = keepAlive.cache[key]
|
if (cached && cached.componentInstance) {
|
cached.componentInstance.$destroy()
|
}
|
keepAlive.cache[key] = null
|
|
const index = keepAlive.keys.indexOf(key)
|
if (index > -1) keepAlive.keys.splice(index, 1)
|
},
|
foldFun() {
|
if (window.innerWidth < 1000) {
|
this.$store.commit('SET_ISFOLD', true)
|
}
|
}
|
}
|
}
|
</script>
|
