refactor(router): 重构路由处理逻辑和类型定义

lzxb · lzxb · commit 8219d7499954 · 2025-06-04T12:12:40.000+08:00
- 将 `onOpen` 和 `onServerLocation` 合并为统一的 `location` 和 `serverLocation` 处理钩子
- 重构路由创建和任务处理流程，简化 `createRoute` 和 `createRouteTask` 实现
- 统一路由钩子类型定义，增加 `RouteHandleResult` 类型支持
- 优化路由参数处理逻辑，修复同源路由匹配问题
diff --git a/packages/router/src/next/default.ts b/packages/router/src/next/default.ts
@@ -1,14 +1,14 @@
 import type { Route } from './types';
 
-export function DEFAULT_ON_OPEN(route: Route) {
+export function DEFAULT_ON_OPEN(to: Route, from: Route | null) {
     try {
-        const newWindow = window.open(route.url.href);
+        const newWindow = window.open(to.url.href);
         if (!newWindow) {
-            location.href = route.url.href;
+            location.href = to.url.href;
         } else {
             newWindow.opener = null; // 解除新窗口与当前窗口的关系
         }
     } catch (e) {
-        location.href = route.url.href;
+        location.href = to.url.href;
     }
 }
diff --git a/packages/router/src/next/options.ts b/packages/router/src/next/options.ts
@@ -29,17 +29,11 @@ export function parsedOptions(options: RouterOptions): RouterParsedOptions {
         apps: options.apps ?? {},
         matcher: createMatcher(routes),
         normalizeURL: options.normalizeURL ?? ((url) => url),
-        onOpen: (route: Route) => {
-            if (isBrowser) {
-                const result = options.onOpen?.(route);
-                if (result !== false) {
-                    DEFAULT_ON_OPEN(route);
-                }
-            }
-            return true;
+        location: (to, from) => {
+            return null;
         },
-        onServerLocation(route) {
-            return true;
+        serverLocation(route) {
+            return null;
         }
     };
     return result;
diff --git a/packages/router/src/next/route.ts b/packages/router/src/next/route.ts
@@ -2,133 +2,114 @@ import { parseLocation } from './location';
 import type {
     Awaitable,
     Route,
+    RouteHandleResult,
     RouteLocationRaw,
-    RouteMatchResult,
     RouteType,
     RouterParsedOptions
 } from './types';
 
-export function parseRoute(
+export function createRoute(
     navigationType: RouteType,
+    toRaw: RouteLocationRaw,
     options: RouterParsedOptions,
-    raw: RouteLocationRaw
+    from: URL | null
 ): Route {
     const { base, normalizeURL } = options;
-    const loc = normalizeURL(parseLocation(raw, base), raw);
-    // 处理外站逻辑
-    if (loc.origin !== base.origin) {
-        return createRoute(navigationType, raw, loc, base);
-    }
-    if (loc.pathname.length < base.pathname.length) {
-        return createRoute(navigationType, raw, loc, base);
-    }
-    // 匹配路由
-    const matched = options.matcher(loc, base);
-    // 没有匹配任何路由
-    if (matched.matches.length === 0) {
-        return createRoute(navigationType, raw, loc, base);
-    }
-    // 重新构造 URL 参数
-    const lastMatch = matched.matches[matched.matches.length - 1];
-    if (typeof raw === 'object' && raw.params) {
-        const current = loc.pathname.split('/');
-        const next = new URL(
-            lastMatch.compile(raw.params).substring(1),
-            base
-        ).pathname.split('/');
-        next.forEach((item, index) => {
-            current[index] = item || current[index];
-        });
-        loc.pathname = current.join('/');
-        Object.assign(matched.params, raw.params);
-    }
-    return createRoute(navigationType, raw, loc, base, matched);
-}
-
-export function createRoute(
-    navigationType: RouteType,
-    raw: RouteLocationRaw,
-    loc: URL,
-    base: URL,
-    match?: RouteMatchResult
-): Route {
+    const to = normalizeURL(parseLocation(toRaw, base), from);
+    const isSameOrigin = to.origin === base.origin;
+    const isSameBase = to.pathname.length >= base.pathname.length;
+    const match = isSameOrigin && isSameBase ? options.matcher(to, base) : null;
     const route: Route = {
+        handleResult: null,
+        req: null,
+        res: null,
         type: navigationType,
-        url: loc,
+        url: to,
         params: {},
         query: {},
         queryArray: {},
-        state: typeof raw === 'object' && raw.state ? raw.state : {},
+        state: typeof toRaw === 'object' && toRaw.state ? toRaw.state : {},
         meta: {},
-        path: loc.pathname,
-        fullPath: loc.pathname + loc.search + loc.hash,
+        path: to.pathname,
+        fullPath: to.pathname + to.search + to.hash,
         matched: [],
         config: null
     };
 
-    for (const key of loc.searchParams.keys()) {
-        const values = loc.searchParams.getAll(key);
+    for (const key of to.searchParams.keys()) {
+        const values = to.searchParams.getAll(key);
         route.query[key] = values[0] || '';
         route.queryArray[key] = values;
     }
     if (match) {
         route.config = match.matches[match.matches.length - 1];
         route.meta = route.config.meta || {};
-        route.path = loc.pathname.substring(base.pathname.length - 1);
-        route.fullPath = `${route.path}${loc.search}${loc.hash}`;
+        route.path = to.pathname.substring(options.base.pathname.length - 1);
+        route.fullPath = `${route.path}${to.search}${to.hash}`;
         route.matched = match.matches;
+        if (typeof toRaw === 'object' && toRaw.params) {
+            const lastMatch = match.matches[match.matches.length - 1];
+            const current = to.pathname.split('/');
+            const next = new URL(
+                lastMatch.compile(toRaw.params).substring(1),
+                options.base
+            ).pathname.split('/');
+            next.forEach((item, index) => {
+                current[index] = item || current[index];
+            });
+            to.pathname = current.join('/');
+            Object.assign(match.params, toRaw.params);
+        }
     }
     return route;
 }
 
-export function createRouteTask(opts: RouteTaskOptions) {
+export async function createRouteTask(opts: RouteTaskOptions) {
     let finish = false;
-    const ctx = {
-        navigationType: opts.navigationType,
-        to: parseRoute(opts.navigationType, opts.options, opts.to),
+    const ctx: RouteTaskContext = {
+        to: createRoute(
+            opts.navigationType,
+            opts.toRaw,
+            opts.options,
+            opts.from?.url ?? null
+        ),
         from: opts.from,
         options: opts.options,
-        finish() {
+        finish(result: RouteHandleResult = null) {
+            this.to.handleResult =
+                result && typeof result === 'object' ? result : null;
             finish = true;
         },
         async redirect(to: RouteLocationRaw) {
             finish = true;
             this.to = await createRouteTask({
                 ...opts,
-                to
-            }).run();
+                toRaw: to
+            });
         }
     };
     const list: Array<RouteTask> = [];
-    return {
-        add(...items: RouteTask[]) {
-            list.push(...items);
-            return this;
-        },
-        async run() {
-            for (const item of list) {
-                await item.task(ctx);
-                if (finish) {
-                    break;
-                }
-            }
-            return ctx.to;
+    for (const item of list) {
+        await item.task(ctx);
+        if (finish) {
+            break;
         }
-    };
+    }
+    return ctx.to;
 }
 
 export interface RouteTaskOptions {
     navigationType: RouteType;
-    to: RouteLocationRaw;
+    toRaw: RouteLocationRaw;
     from: Route | null;
     options: RouterParsedOptions;
+    tasks: RouteTask[];
 }
 export interface RouteTaskContext {
-    navigationType: RouteType;
     to: Route;
     from: Route | null;
     options: RouterParsedOptions;
-    finish: () => void;
+    finish: (result?: RouteHandleResult) => void;
     redirect: (to: RouteLocationRaw) => Promise<void>;
 }
 
diff --git a/packages/router/src/next/router.ts b/packages/router/src/next/router.ts
@@ -5,13 +5,13 @@ import {
     type RouteTask,
     type RouteTaskCallback,
     type RouteTaskContext,
-    createRouteTask,
-    parseRoute
+    createRoute,
+    createRouteTask
 } from './route';
 import { RouteType } from './types';
 import type {
     Route,
-    RouteEnvHandle,
+    RouteHandleHook,
     RouteLocationRaw,
     RouteState,
     RouterOptions,
@@ -37,7 +37,7 @@ export class Router {
     private _tasks = {
         [TaskType.outside]: (ctx: RouteTaskContext) => {
             if (ctx.to.matched.length === 0) {
-                ctx.options.onOpen(ctx.to);
+                ctx.options.location(ctx.to, ctx.from);
                 return ctx.finish();
             }
         },
@@ -46,20 +46,22 @@ export class Router {
             if (!to.config || !to.config.env) {
                 return;
             }
-            let envBridge: RouteEnvHandle | null = null;
+            let routeHandle: RouteHandleHook | null = null;
             if (typeof to.config.env === 'function') {
-                envBridge = to.config.env;
+                routeHandle = to.config.env;
             } else if (typeof to.config.env === 'object') {
                 const { require, handle } = to.config.env;
-                if (typeof require === 'function' && require(to)) {
-                    envBridge = handle || null;
+                if (
+                    typeof require === 'function' &&
+                    require(ctx.to, ctx.from)
+                ) {
+                    routeHandle = handle || null;
                 } else {
-                    envBridge = handle || null;
+                    routeHandle = handle || null;
                 }
             }
-            if (envBridge) {
-                envBridge(to);
-                ctx.finish();
+            if (routeHandle) {
+                ctx.finish(await routeHandle(ctx.to, ctx.from));
             }
         },
         [TaskType.asyncComponent]: async (ctx: RouteTaskContext) => {
@@ -83,17 +85,14 @@ export class Router {
         },
         [TaskType.applyApp]: (ctx: RouteTaskContext) => {
             this._route = ctx.to;
-            this._microApp._update(
-                this,
-                ctx.navigationType === RouteType.reload
-            );
+            this._microApp._update(this, ctx.to.type === RouteType.reload);
         },
         [TaskType.applyNavigation]: (ctx: RouteTaskContext) => {
             this._navigation.push(ctx.to);
             ctx.finish();
         },
         [TaskType.applyWindow]: (ctx: RouteTaskContext) => {
-            ctx.options.onOpen(ctx.to);
+            ctx.options.location(ctx.to, ctx.from);
             ctx.finish();
         }
     } satisfies Record<string, RouteTaskCallback>;
@@ -148,28 +147,28 @@ export class Router {
             }
         );
     }
-    public push(location: RouteLocationRaw): Promise<Route> {
-        return this._transitionTo(RouteType.push, location);
+    public push(toRaw: RouteLocationRaw): Promise<Route> {
+        return this._transitionTo(RouteType.push, toRaw);
     }
-    public replace(location: RouteLocationRaw) {
-        return this._transitionTo(RouteType.replace, location);
+    public replace(toRaw: RouteLocationRaw) {
+        return this._transitionTo(RouteType.replace, toRaw);
     }
-    public openWindow(location?: RouteLocationRaw): Promise<Route> {
+    public openWindow(toRaw?: RouteLocationRaw): Promise<Route> {
         return this._transitionTo(
             RouteType.openWindow,
-            location ?? this.route.url.href
+            toRaw ?? this.route.url.href
         );
     }
-    public replaceWindow(location?: RouteLocationRaw): Promise<Route> {
+    public replaceWindow(toRaw?: RouteLocationRaw): Promise<Route> {
         return this._transitionTo(
             RouteType.replaceWindow,
-            location ?? this.route.url.href
+            toRaw ?? this.route.url.href
         );
     }
-    public reload(location?: RouteLocationRaw): Promise<Route> {
+    public reload(toRaw?: RouteLocationRaw): Promise<Route> {
         return this._transitionTo(
             RouteType.reload,
-            location ?? this.route.url.href
+            toRaw ?? this.route.url.href
         );
     }
     public async back(): Promise<Route | null> {
@@ -208,28 +207,32 @@ export class Router {
             state: result.state
         });
     }
-    public resolve(loc: RouteLocationRaw): Route {
-        return parseRoute(RouteType.resolve, this.options, loc);
+    public resolve(toRaw: RouteLocationRaw): Route {
+        return createRoute(
+            RouteType.resolve,
+            toRaw,
+            this.options,
+            this._route?.url ?? null
+        );
     }
 
-    public pushLayer(loc: RouteLocationRaw) {}
-    private _transitionTo(navigationType: RouteType, to: RouteLocationRaw) {
+    public pushLayer(toRaw: RouteLocationRaw) {}
+    private _transitionTo(navigationType: RouteType, toRaw: RouteLocationRaw) {
         const names: string[] = this._taskMaps[navigationType] ?? [];
         const { _tasks } = this;
-        const tasks = names.map((name) => {
+        const tasks: RouteTask[] = names.map((name) => {
             return {
                 name,
                 task: _tasks[name]
             } satisfies RouteTask;
         });
         return createRouteTask({
             navigationType,
-            to,
+            toRaw,
             from: this._route,
-            options: this.options
-        })
-            .add(...tasks)
-            .run();
+            options: this.options,
+            tasks
+        });
     }
     public async renderToString(throwError = false): Promise<string | null> {
         try {
diff --git a/packages/router/src/next/types.ts b/packages/router/src/next/types.ts

Original file line number	Diff line number	Diff line change
`@@ -1,14 +1,14 @@`
`1`	`1`	`import type { Route } from './types';`
`2`	`2`
`3`		`-export function DEFAULT_ON_OPEN(route: Route) {`
	`3`	`+export function DEFAULT_ON_OPEN(to: Route, from: Route \| null) {`
`4`	`4`	`try {`
`5`		`- const newWindow = window.open(route.url.href);`
	`5`	`+ const newWindow = window.open(to.url.href);`
`6`	`6`	`if (!newWindow) {`
`7`		`- location.href = route.url.href;`
	`7`	`+ location.href = to.url.href;`
`8`	`8`	`} else {`
`9`	`9`	`newWindow.opener = null; // 解除新窗口与当前窗口的关系`
`10`	`10`	`}`
`11`	`11`	`} catch (e) {`
`12`		`- location.href = route.url.href;`
	`12`	`+ location.href = to.url.href;`
`13`	`13`	`}`
`14`	`14`	`}`