From c666faed6691bf51918195484f22354ebcf86b8d Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期六, 28 十一月 2020 20:31:45 +0800 Subject: [PATCH] 修复三级菜单之间切换页面无法缓存的问题 --- ruoyi-ui/src/layout/components/AppMain.vue | 121 +++++++++++++++++++++++++++++++++++++--- 1 files changed, 112 insertions(+), 9 deletions(-) diff --git a/ruoyi-ui/src/layout/components/AppMain.vue b/ruoyi-ui/src/layout/components/AppMain.vue index 423437b..8da5714 100644 --- a/ruoyi-ui/src/layout/components/AppMain.vue +++ b/ruoyi-ui/src/layout/components/AppMain.vue @@ -1,7 +1,8 @@ +<!-- @author ruoyi 20201128 支持三级以上菜单缓存 --> <template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> - <keep-alive :include="cachedViews"> + <keep-alive :max="20" :exclude="notCacheName"> <router-view :key="key" /> </keep-alive> </transition> @@ -9,17 +10,119 @@ </template> <script> +import Global from "@/layout/components/global.js"; + export default { name: 'AppMain', computed: { - cachedViews() { - return this.$store.state.tagsView.cachedViews + 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; }, key() { - return this.$route.path - } - } -} + 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); + } + }); + }, + }, +}; </script> <style lang="scss" scoped> @@ -31,7 +134,7 @@ overflow: hidden; } -.fixed-header+.app-main { +.fixed-header + .app-main { padding-top: 50px; } @@ -41,7 +144,7 @@ min-height: calc(100vh - 84px); } - .fixed-header+.app-main { + .fixed-header + .app-main { padding-top: 84px; } } -- Gitblit v1.9.2