optimize(packages): simple-router: optimize code

packages/simple-router/src/router.ts

@@ -11,6 +11,7 @@ import { cleanParams, findParentNames, getFullPath, removeElement, transformLoca
 import type { NavigationFailure } from './error';
 import { ErrorTypes, createRouterError } from './error';
 import { warn } from './warning';
+import { callbacks } from './/utils/callback';
 
 const historyCreatorMap = {
   hash: createHashRouter,
@@ -30,17 +31,19 @@ export interface RouterOptions {
   opt: Options;
   getReactRoutes: (route: ElegantConstRoute) => RouteObject;
   init: Init;
-  afterEach: AfterEach;
-  beforeEach: BeforeEach;
 }
 
-export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes, init, afterEach }: RouterOptions) {
+export function createRouter({ initRoutes, mode, opt, getReactRoutes, init }: RouterOptions) {
   const matcher = new CreateRouterMatcher(initRoutes);
 
   const initReactRoutes = initRoutes.map(route => getReactRoutes(route));
 
   const reactRouter = historyCreatorMap[mode](initReactRoutes, opt);
 
+  const beforeGuards = callbacks<BeforeEach>();
+
+  const afterGuards = callbacks<AfterEach>();
+
   reactRouter.dispose();
 
   let currentRoute = transformLocationToRoute(reactRouter.state.location, reactRouter.state.matches);
@@ -106,7 +109,7 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
       }
     }
 
-    return beforeEach(to, currentRoute, blockerOrJump);
+    return beforeGuards.list()[0]?.(to, currentRoute, blockerOrJump);
   }
 
   function blockerOrJump(param?: undefined | null | boolean | string | Location | RouteLocationNamedRaw) {
@@ -153,7 +156,7 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
 
       currentRoute = resolve(state.location);
 
-      afterEach(currentRoute, from);
+      afterGuards.list()[0]?.(currentRoute, from);
     }
   }
 
@@ -306,6 +309,8 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
     go,
     back,
     removeRoute,
+    beforeEach: beforeGuards.add,
+    afterEach: afterGuards.add,
     getRouteMetaByKey,
     forwardRef,
     initReady,

packages/simple-router/src/utils/callback.ts

@@ -0,0 +1,24 @@
+/** Create a list of callbacks that can be reset. Used to create before and after navigation guards list */
+export function callbacks<T>() {
+  let handlers: T[] = [];
+
+  function add(handler: T): () => void {
+    console.log(222);
+
+    handlers.push(handler);
+    return () => {
+      const i = handlers.indexOf(handler);
+      if (i > -1) handlers.splice(i, 1);
+    };
+  }
+
+  function reset() {
+    handlers = [];
+  }
+
+  return {
+    add,
+    list: () => handlers.slice(),
+    reset
+  };
+}

src/router/elegant/routes.ts

@@ -152,7 +152,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.function_tab',
           icon: 'ic:round-tab',
           order: 1,
-          keepAlive:true
+          keepAlive: true
         }
       },
       {
@@ -281,7 +281,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           icon: 'ic:round-manage-accounts',
           order: 1,
           roles: ['R_ADMIN'],
-          keepAlive:true
+          keepAlive: true
         }
       },
       {

src/router/index.ts

@@ -21,11 +21,11 @@ export const router = createRouter({
   mode: VITE_ROUTER_HISTORY_MODE,
   getReactRoutes,
   init,
-  beforeEach: createRouteGuard,
-  afterEach,
   opt: { basename: VITE_BASE_URL }
 });
 
 export async function setupRouter() {
+  router.beforeEach(createRouteGuard);
+  router.afterEach(afterEach);
   await router.initReady();
 }