1、使用路由缓存keep-alive缓存数据
<template>
<section id="app" class="app-main">
<keep-alive>
<router-view v-slot="{ Component }" :key="key">
<transition name="fade-transform" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</keep-alive>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.fullPath
}
},
data() {
return {}
}
}
</script>
2、在当前标签页关闭其它标签时需要清除相对应标签页的缓存的数据
<template>
<el-tabs v-model="editableTabsValue" class="tabs" closable @tab-remove="removeTab" @tab- click="tabClick">
<el-tab-pane
v-for="item in tabList"
:key="item.path"
:label="langText(item.meta.title)"
:name="item.path"
/>
</el-tabs>
</template>
<script>
export default {
data() {
return {
editableTabsValue: '',
tabList: [],
}
},
methods: {
removeTab(targetPath) {
// 点击关闭标签页,重新激活关闭路由
let event = new Event('click')
document.getElementById("tab-" + targetPath).dispatchEvent(event) // 触发点击事件
if (this.editableTabsValue === targetPath) {
// 设置当前激活的路由
if (this.tabList && this.tabList.length >= 1) {
this.$router.push({ path: this.editableTabsValue });
} else {
this.$router.push({ path: '/' });
}
}
}
}
}
</script>
3、关闭当前标签时需要清除缓存的数据
// 关闭当前标签页时，将当前路由keep-alive缓存的组件删除
Vue.mixin({
beforeRouteLeave(to, from, next) {
let flag = true
this.$store.state.app.tabList.forEach(e => { // tabList存储打开的tabs的组件路由
if(from.path == e.path) {
flag = false
}
})
if(flag && this.$vnode.parent && this.$vnode.parent.componentInstance.cache) {
let key = this.$vnode.key // 当前关闭的组件名
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()
}
})
