From 425a6eb5c3169df5d8ecbc503adee46d42be7403 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 10 Nov 2021 22:19:28 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: xiaoxian521 <1923740402@qq.com> --- src/layout/components/tag/index.vue | 38 ++++++++++++++++++++----------------- src/layout/types.ts | 1 + src/router/index.ts | 11 +++++++++++ src/store/modules/permission.ts | 2 +- vite.config.ts | 1 + 5 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue index 2642110..ac9c46e 100644 --- a/src/layout/components/tag/index.vue +++ b/src/layout/components/tag/index.vue @@ -26,7 +26,7 @@ import { import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types"; import { emitter } from "/@/utils/mitt"; import { templateRef } from "@vueuse/core"; -import { handleAliveRoute } from "/@/router"; +import { handleAliveRoute, delAliveRoutes } from "/@/router"; import { storageLocal } from "/@/utils/storage"; import { useRoute, useRouter } from "vue-router"; import { usePermissionStoreHook } from "/@/store/modules/permission"; @@ -124,7 +124,8 @@ function dynamicRouteTag(value: string, parentPath: string): void { routerArrays.push({ path: value, parentPath: `/${parentPath.split("/")[1]}`, - meta: arrItem.meta + meta: arrItem.meta, + name: arrItem.name }); relativeStorage.routesInStorage = routerArrays; } else { @@ -151,6 +152,8 @@ function onFresh() { } function deleteDynamicTag(obj: any, current: any, tag?: string) { + // 存放被删除的缓存路由 + let delAliveRouteList = []; let valueIndex: number = routerArrays.findIndex((item: any) => { return item.path === obj.path; }); @@ -171,7 +174,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) { ]; routerArrays = relativeStorage.routesInStorage; } else { - routerArrays.splice(start, end); + delAliveRouteList = routerArrays.splice(start, end); relativeStorage.routesInStorage = routerArrays; } }; @@ -189,7 +192,9 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) { let newRoute: any = routerArrays.slice(-1); if (current === route.path) { // 删除缓存路由 - handleAliveRoute(route.matched, "delete"); + tag + ? delAliveRoutes(delAliveRouteList) + : handleAliveRoute(route.matched, "delete"); // 如果删除当前激活tag就自动切换到最后一个tag if (tag === "left") return; nextTick(() => { @@ -198,20 +203,16 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) { }); }); } else { - //保存跳转之前的路径 - let oldPath = route.path; - router.push(obj.path); // 删除缓存路由 - handleAliveRoute(route.matched, "delete"); + tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]); if (!routerArrays.length) return; - let isHasOldPath = routerArrays.some(item => { - return item.path === oldPath; + let isHasActiveTag = routerArrays.some(item => { + return item.path === route.path; }); - isHasOldPath - ? router.push(oldPath) - : router.push({ - path: newRoute[0].path - }); + !isHasActiveTag && + router.push({ + path: newRoute[0].path + }); } } @@ -230,7 +231,11 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) { case 1: // 关闭当前标签页 selectRoute - ? deleteMenu({ path: selectRoute.path, meta: selectRoute.meta }) + ? deleteMenu({ + path: selectRoute.path, + meta: selectRoute.meta, + name: selectRoute.name + }) : deleteMenu({ path: route.path, meta: route.meta }); break; case 2: @@ -275,7 +280,6 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) { relativeStorage.routesInStorage = routerArrays; usePermissionStoreHook().clearAllCachePage(); router.push("/welcome"); - break; } setTimeout(() => { diff --git a/src/layout/types.ts b/src/layout/types.ts index 61b4e55..949e4cd 100644 --- a/src/layout/types.ts +++ b/src/layout/types.ts @@ -19,6 +19,7 @@ export type RouteConfigs = { showLink?: boolean; savedPosition?: boolean; }; + name?: string; }; export type relativeStorageType = { diff --git a/src/router/index.ts b/src/router/index.ts index 459c498..ad90971 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -10,6 +10,7 @@ import { i18n } from "/@/plugins/i18n"; import { openLink } from "/@/utils/link"; import NProgress from "/@/utils/progress"; import { useTimeoutFn } from "@vueuse/core"; +import { RouteConfigs } from "/@/layout/types"; import { storageSession, storageLocal } from "/@/utils/storage"; import { usePermissionStoreHook } from "/@/store/modules/permission"; @@ -61,6 +62,16 @@ export const getAliveRoute = () => { return alivePageList; }; +// 批量删除缓存路由 +export const delAliveRoutes = (delAliveRouteList: Array) => { + delAliveRouteList.forEach(route => { + usePermissionStoreHook().cacheOperate({ + mode: "delete", + name: route?.name + }); + }); +}; + // 处理缓存路由（添加、删除、刷新） export const handleAliveRoute = ( matched: RouteRecordNormalized[], diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index a75424c..aa4061e 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -46,7 +46,7 @@ export const usePermissionStore = defineStore({ case "delete": // eslint-disable-next-line no-case-declarations const delIndex = this.cachePageList.findIndex(v => v === name); - this.cachePageList.splice(delIndex, 1); + delIndex !== -1 && this.cachePageList.splice(delIndex, 1); break; } }, diff --git a/vite.config.ts b/vite.config.ts index 172e28f..6b62ced 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -62,6 +62,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => { { libraryName: "vxe-table", esModule: true, + ensureStyleFile: true, resolveComponent: name => `vxe-table/es/${name}`, resolveStyle: name => `vxe-table/es/${name}/style.css` }