perf: 页面切换性能优化

Author: xiaoxian521

src/layout/components/sidebar/horizontal.vue

@@ -56,7 +56,6 @@ watch(
       mode="horizontal"
       class="horizontal-header-menu"
       :default-active="route.path"
-      @select="indexPath => menuSelect(indexPath, routers)"
     >
       <sidebar-item
         v-for="route in usePermissionStoreHook().wholeMenus"

src/layout/components/sidebar/vertical.vue

@@ -90,7 +90,6 @@ onBeforeUnmount(() => {
         :collapse="isCollapse"
         :default-active="route.path"
         :collapse-transition="false"
-        @select="indexPath => menuSelect(indexPath, routers)"
       >
         <sidebar-item
           v-for="routes in menuData"

src/layout/components/tag/index.vue

@@ -4,12 +4,12 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
-import { isEqual, isAllEmpty } from "@pureadmin/utils";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
+import { useResizeObserver, useFullscreen } from "@vueuse/core";
+import { isEqual, isAllEmpty, debounce } from "@pureadmin/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
-import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
@@ -54,20 +54,22 @@ const topPath = getTopMenu()?.path;
 const { VITE_HIDE_HOME } = import.meta.env;
 const { isFullscreen, toggle } = useFullscreen();
 
-const dynamicTagView = () => {
+const dynamicTagView = async () => {
+  await nextTick();
   const index = multiTags.value.findIndex(item => {
-    if (item.query) {
+    if (!isAllEmpty(route.query)) {
       return isEqual(route.query, item.query);
-    } else if (item.params) {
+    } else if (!isAllEmpty(route.params)) {
       return isEqual(route.params, item.params);
     } else {
-      return item.path === route.path;
+      return route.path === item.path;
     }
   });
   moveToView(index);
 };
 
 const moveToView = async (index: number): Promise<void> => {
+  await nextTick();
   const tabNavPadding = 10;
   if (!instance.refs["dynamic" + index]) return;
   const tabItemEl = instance.refs["dynamic" + index][0];
@@ -78,9 +80,6 @@ const moveToView = async (index: number): Promise<void> => {
     ? scrollbarDom.value?.offsetWidth
     : 0;
 
-  // 获取视图更新后dom
-  await nextTick();
-
   // 已有标签页总长度（包含溢出部分）
   const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
 
@@ -135,31 +134,29 @@ const handleScroll = (offset: number): void => {
   }
 };
 
-function dynamicRouteTag(value: string, parentPath: string): void {
+function dynamicRouteTag(value: string): void {
   const hasValue = multiTags.value.some(item => {
     return item.path === value;
   });
 
-  function concatPath(arr: object[], value: string, parentPath: string) {
+  function concatPath(arr: object[], value: string) {
     if (!hasValue) {
       arr.forEach((arrItem: any) => {
-        const pathConcat = parentPath + arrItem.path;
-        if (arrItem.path === value || pathConcat === value) {
+        if (arrItem.path === value || arrItem.path === value) {
           useMultiTagsStoreHook().handleTags("push", {
             path: value,
-            parentPath: `/${parentPath.split("/")[1]}`,
             meta: arrItem.meta,
             name: arrItem.name
           });
         } else {
           if (arrItem.children && arrItem.children.length > 0) {
-            concatPath(arrItem.children, value, parentPath);
+            concatPath(arrItem.children, value);
           }
         }
       });
     }
   }
-  concatPath(router.options.routes as any, value, parentPath);
+  concatPath(router.options.routes as any, value);
 }
 
 /** 刷新路由 */
@@ -465,7 +462,7 @@ function tagOnClick(item) {
   // showMenuModel(item?.path, item?.query);
 }
 
-watch([route], () => {
+watch(route, () => {
   activeIndex.value = -1;
   dynamicTagView();
 });
@@ -493,18 +490,16 @@ onMounted(() => {
   });
 
   //  接收侧边栏切换传递过来的参数
-  emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
-    dynamicRouteTag(indexPath, parentPath);
+  emitter.on("changLayoutRoute", ({ indexPath }) => {
+    dynamicRouteTag(indexPath);
     setTimeout(() => {
       showMenuModel(indexPath);
     });
   });
 
   useResizeObserver(
     scrollbarDom,
-    useDebounceFn(() => {
-      dynamicTagView();
-    }, 200)
+    debounce(() => dynamicTagView())
   );
 });
 

src/layout/hooks/useNav.ts

@@ -114,34 +114,14 @@ export function useNav() {
     }
   }
 
-  function menuSelect(indexPath: string, routers): void {
+  function menuSelect(indexPath: string): void {
     if (wholeMenus.value.length === 0) return;
     if (isRemaining(indexPath)) return;
-    let parentPath = "";
-    const parentPathIndex = indexPath.lastIndexOf("/");
-    if (parentPathIndex > 0) {
-      parentPath = indexPath.slice(0, parentPathIndex);
-    }
+
     /** 找到当前路由的信息 */
-    function findCurrentRoute(indexPath: string, routes) {
-      if (!routes) return console.error(errorInfo);
-      return routes.map(item => {
-        if (item.path === indexPath) {
-          if (item.redirect) {
-            findCurrentRoute(item.redirect, item.children);
-          } else {
-            /** 切换左侧菜单 通知标签页 */
-            emitter.emit("changLayoutRoute", {
-              indexPath,
-              parentPath
-            });
-          }
-        } else {
-          if (item.children) findCurrentRoute(indexPath, item.children);
-        }
-      });
-    }
-    findCurrentRoute(indexPath, routers);
+    emitter.emit("changLayoutRoute", {
+      indexPath
+    });
   }
 
   /** 判断路径是否参与菜单 */

src/layout/types.ts

@@ -6,7 +6,6 @@ export const routerArrays: Array<RouteConfigs> =
     ? [
         {
           path: "/welcome",
-          parentPath: "/",
           meta: {
             title: "menus.hshome",
             icon: "homeFilled"
@@ -25,7 +24,6 @@ export type routeMetaType = {
 
 export type RouteConfigs = {
   path?: string;
-  parentPath?: string;
   query?: object;
   params?: object;
   meta?: routeMetaType;

src/store/modules/types.ts

@@ -24,7 +24,6 @@ export type appType = {
 
 export type multiType = {
   path: string;
-  parentPath: string;
   name: string;
   meta: any;
   query?: object;

src/utils/mitt.ts

@@ -14,7 +14,6 @@ type Events = {
   logoChange: boolean;
   changLayoutRoute: {
     indexPath: string;
-    parentPath: string;
   };
 };