Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化多级菜单之间切换无法缓存的问题

Browse Source
This commit is contained in:
RuoYi
2020-12-16 20:57:48 +08:00
parent e23ad20186
commit ecc7a8be46
8 changed files with 55 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
ruoyi-ui/src/layout/components/AppMain.vue
View File

@@ -1,8 +1,7 @@
<!-- @author ruoyi 20201128 支持三级以上菜单缓存 -->
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :max="20" :exclude="notCacheName">
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
</transition>
@@ -10,119 +9,17 @@
</template>
<script>
import Global from "@/layout/components/global.js";
export default {
name: 'AppMain',
computed: {
notCacheName() {
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;
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path;
},
},
mounted() {
// 关闭标签触发
Global.$on("removeCache", (name, view) => {
this.removeCache(name, view);
});
},
methods: {
// 获取有keep-alive子节点的Vnode
getVnode() {
// 判断子集非空
if (this.$children.length == 0) return false;
let vnode;
for (let item of this.$children) {
// 如果data中有key则代表找到了keep-alive下面的子集，这个key就是router-view上的key
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];
// 移除key中对应的key
componentInstance.keys.splice(index, 1);
}
});
},
// 移除所有缓存
closeAllTags({ componentInstance }) {
// 销毁实例
Object.keys(componentInstance.cache).forEach((key) => {
if (componentInstance.cache[key]) {
componentInstance.cache[key].componentInstance.$destroy();
}
});
// 删除缓存
componentInstance.cache = {};
// 移除key中对应的key
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];
// 移除key中对应的key
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 移除key中对应的key
componentInstance.keys.splice(index, 1);
}
});
},
},
};
return this.$route.path
}
}
}
</script>
<style lang="scss" scoped>
@@ -134,7 +31,7 @@ export default {
overflow: hidden;
}
.fixed-header + .app-main {
.fixed-header+.app-main {
padding-top: 50px;
}
@@ -144,7 +41,7 @@ export default {
min-height: calc(100vh - 84px);
}
.fixed-header + .app-main {
.fixed-header+.app-main {
padding-top: 84px;
}
}

4
ruoyi-ui/src/layout/components/Sidebar/index.vue
View File

@@ -13,7 +13,7 @@
mode="vertical"
>
<sidebar-item
v-for="(route, index) in permission_routes"
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
@@ -33,7 +33,7 @@ export default {
components: { SidebarItem, Logo },
computed: {
...mapState(["settings"]),
...mapGetters(["permission_routes", "sidebar"]),
...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() {
const route = this.$route;
const { meta, path } = route;

5
ruoyi-ui/src/layout/components/TagsView/index.vue
View File

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