router 版本迭代 v2025-05-14

[lzxb]

微应用支持

// 路由应用注册器
interface RouterRegisterApp {
    // 应用挂载函数
    mount: () => void;
    // 应用销毁函数
    unmount: () => void;
    // 服务端渲染时的渲染函数
    renderToString?: () => string;
}

const router = new Router({
    initUrl: '/',
    routes: [
        {
            path: '/',
            appType: 'vue2',
            component: Home
        }, {
            path: '/setting',
            appType: 'vue3',
            component: Setting
        }, {
            path: '/about',
            appType: 'React',
            component: About
        },],
});

router.registerApp('app', (router) => {
    const app = new App({
        router
    })
    return {
        mount: () => {
            app.mount('#app');
        },
        unmount: () => {
            app.destroy();
        },
        renderToString: async () => {
            return renderToString(app)
        }
    }
})

// 初始化路由
await router.init();
// 更新路由
await router.push('/about');
// 
await router.pushLayer('/setting');
// 服务端渲染时调用
await router.renderToString();

[jerrychan7]

目前阶段商量和总结出的流程：

flowchart TD
    start(["Start"]):::Terminal --> decodeURL["解析 URL"]
    decodeURL --> isExternalUrl{"是站内地址"}:::Decision
    isExternalUrl -- Yes --> matchInRouteTable["在路由表内匹配"]
    isExternalUrl -- No --> externalUrlHandler["外站跳转逻辑"] --> End
    matchInRouteTable --> tmpHook["钩子<br>(暂定，用于强制刷新/开新窗口等操作)"] & isExist{"存在匹配项"}:::Decision
    isExist -- No --> End
    isExist -- Yes --> execGuard["执行回调钩子/守卫"] -.-> End
    execGuard --> updateRoute["更新路由<br>(mount &amp; 更新 route)"] --> End(["End"]):::Terminal
    decodeURL ~~~ externalUrlHandler
    subgraph s1["执行回调钩子/守卫"]
        direction LR
        start2(["Start"]):::Terminal --> sameRoute{"是否是相同路由"}:::Decision
        sameRoute -- No --> beforeLeave["beforeLeave"]
        sameRoute -- Yes --> layerAction["layerAction"]
        beforeLeave --> layerAction --> beforeEach["beforeEach"] --> sameRoute2{"是否是相同路由"}:::Decision
        sameRoute2 -- No --> beforeEnter["beforeEnter"]
        sameRoute2 -- Yes --> beforeUpdate["beforeUpdate"]
        beforeEnter --> loadRoute["loadRoute<br>(内部)"]
        loadRoute --> afterEach["afterEach"]
        afterEach --> End2(["End"]):::Terminal
        beforeUpdate --> afterEach
    end
    End ~~~ s1
    classDef Terminal fill:#FFF9C4,color:#000
    classDef Decision fill:#C8E6C9,color:#000

[jerrychan7]

目前的进度：

1. [x] 路由 pushLayer
   1. [x] 子路由
   2. [x] 判断是否关闭弹窗的钩子
   3. [x] closeLayer
   4. [x] 仅改变浏览器 URL 的便捷方法
   5. [x] 返回值
   6. [x] 允许用户传递自定义事件
2. [x] 上下文
   1. [x] 全局
   2. [x] 应用内
   3. [x] pushLayer
   4. [x] push
   5. [x] replace
   6. [x] reload
   7. [x] forceReload
   8. [x] pushWindow
3. [x] 路由导航方法返回值
   1. [x] push
   2. [x] replace
   3. [x] reload
   4. [x] forceReload
   5. [x] pushWindow
4. [x] 新增导航方式 reload 和 forceReload
5. [x] 可选的 renderToString
6. [x] 归一化 URL 钩子
7. [x] 外站跳转钩子
8. [x] afterMatch 钩子
9. [x] hybrid 钩子（暂定）