修复三级菜单之间切换页面无法缓存的问题

This commit is contained in:
RuoYi 2020-11-28 20:31:45 +08:00
parent 6072239a40
commit c666faed66
3 changed files with 120 additions and 9 deletions

View File

@ -1,7 +1,8 @@
<!-- @author ruoyi 20201128 支持三级以上菜单缓存 -->
<template> <template>
<section class="app-main"> <section class="app-main">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews"> <keep-alive :max="20" :exclude="notCacheName">
<router-view :key="key" /> <router-view :key="key" />
</keep-alive> </keep-alive>
</transition> </transition>
@ -9,17 +10,119 @@
</template> </template>
<script> <script>
import Global from "@/layout/components/global.js";
export default { export default {
name: 'AppMain', name: 'AppMain',
computed: { computed: {
cachedViews() { notCacheName() {
return this.$store.state.tagsView.cachedViews var visitedViews = this.$store.state.tagsView.visitedViews;
var noCacheViews = [];
Object.keys(visitedViews).some((index) => {
if (visitedViews[index].meta.noCache) {
noCacheViews.push(visitedViews[index].name);
}
});
return noCacheViews;
}, },
key() { key() {
return this.$route.path return this.$route.path;
},
},
mounted() {
//
Global.$on("removeCache", (name, view) => {
this.removeCache(name, view);
});
},
methods: {
// keep-aliveVnode
getVnode() {
//
if (this.$children.length == 0) return false;
let vnode;
for (let item of this.$children) {
// datakeykeep-alivekeyrouter-viewkey
if (item.$vnode.data.key) {
vnode = item.$vnode;
break;
} }
} }
} return vnode ? vnode : false;
},
// keep-alive
removeCache(name, view = {}) {
let vnode = this.getVnode();
if (!vnode) return false;
let componentInstance = vnode.parent.componentInstance;
// key
let keyStart = vnode.key.split("/")[0];
let thisKey = `${keyStart}${view.fullPath}`;
let regKey = `${keyStart}${view.path}`;
this[name]({ componentInstance, thisKey, regKey });
},
//
closeOthersTags({ componentInstance, thisKey }) {
Object.keys(componentInstance.cache).forEach((key, index) => {
if (key != thisKey) {
// (key)
if (componentInstance.cache[key]) {
componentInstance.cache[key].componentInstance.$destroy();
}
//
delete componentInstance.cache[key];
// keykey
componentInstance.keys.splice(index, 1);
}
});
},
//
closeAllTags({ componentInstance }) {
//
Object.keys(componentInstance.cache).forEach((key) => {
if (componentInstance.cache[key]) {
componentInstance.cache[key].componentInstance.$destroy();
}
});
//
componentInstance.cache = {};
// keykey
componentInstance.keys = [];
},
//
closeSelectedTag({ componentInstance, regKey }) {
let reg = new RegExp(`^${regKey}`);
Object.keys(componentInstance.cache).forEach((key, i) => {
if (reg.test(key)) {
//
if (componentInstance.cache[key]) {
componentInstance.cache[key].componentInstance.$destroy();
}
//
delete componentInstance.cache[key];
// keykey
componentInstance.keys.splice(i, 1);
}
});
},
//
refreshSelectedTag({ componentInstance, thisKey }) {
Object.keys(componentInstance.cache).forEach((key, index) => {
if (null != thisKey && key.replace("/redirect", "") == thisKey) {
// 1 (key)
if (componentInstance.cache[key]) {
componentInstance.cache[key].componentInstance.$destroy();
}
// 2
delete componentInstance.cache[key];
// 3 keykey
componentInstance.keys.splice(index, 1);
}
});
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -31,7 +134,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
.fixed-header+.app-main { .fixed-header + .app-main {
padding-top: 50px; padding-top: 50px;
} }
@ -41,7 +144,7 @@ export default {
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
} }
.fixed-header+.app-main { .fixed-header + .app-main {
padding-top: 84px; padding-top: 84px;
} }
} }

View File

@ -29,6 +29,7 @@
<script> <script>
import ScrollPane from './ScrollPane' import ScrollPane from './ScrollPane'
import path from 'path' import path from 'path'
import Global from "@/layout/components/global.js";
export default { export default {
components: { ScrollPane }, components: { ScrollPane },
@ -144,6 +145,7 @@ export default {
}) })
}) })
}) })
Global.$emit("removeCache", "refreshSelectedTag", this.selectedTag);
}, },
closeSelectedTag(view) { closeSelectedTag(view) {
this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
@ -151,12 +153,14 @@ export default {
this.toLastView(visitedViews, view) this.toLastView(visitedViews, view)
} }
}) })
Global.$emit("removeCache", "closeSelectedTag", view);
}, },
closeOthersTags() { closeOthersTags() {
this.$router.push(this.selectedTag) this.$router.push(this.selectedTag)
this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
this.moveToCurrentTag() this.moveToCurrentTag()
}) })
Global.$emit("removeCache", "closeOthersTags", this.selectedTag);
}, },
closeAllTags(view) { closeAllTags(view) {
this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
@ -165,6 +169,7 @@ export default {
} }
this.toLastView(visitedViews, view) this.toLastView(visitedViews, view)
}) })
Global.$emit("removeCache", "closeAllTags");
}, },
toLastView(visitedViews, view) { toLastView(visitedViews, view) {
const latestView = visitedViews.slice(-1)[0] const latestView = visitedViews.slice(-1)[0]

View File

@ -0,0 +1,3 @@
import Vue from 'vue'
const global = new Vue()
export default global