Navigation的三种方式之动态路由（自定义路由表动态import）
参考链接
Navigation+hvigor插件：https://gitee.com/zhongrui_developer/AppRouterProject/tree/master#%E7%AE%80%E4%BB%8B
https://gitcode.com/HarmonyOS-Cases/cases/tree/master/test/performance/dynamicRouter/
系统路由表实现页面跳转:
RouterMap注册转为wrapBuilder注册:
https://developer.huawei.com/consumer/cn/blog/topic/03170546465388036
https://developer.huawei.com/consumer/cn/blog/topic/03170546465388036
1.创建路由管理模块
各模块需依赖此模块，用于封装路由能力。通过注入NavPathStack并封装路由跳转逻辑。
2.页面构建函数封装
各路由页面不再直接导出组件，而是提供@Builder封装的构建函数，并用WrappedBuilder全局封装：
// 示例：页面构建函数封装 @Builder function pageBuilder() { PageComponent() } const wrappedBuilder = WrappedBuilder(pageBuilder);3.路由注册
在路由管理模块中注册路由信息：
// 注册格式 registerRoute(moduleName: string, routeName: string, builder: WrappedBuilder);4.动态导入与跳转
跳转时动态加载目标模块并执行路由导航：
// 伪代码示例 importDynamic(moduleName).then(() => { navPathStack.pushPath({ name: routeName }); });# Navigation动态路由 - 面试回答
## 一、核心概念（一句话概括）
Navigation动态路由实现了**跨模块页面跳转**，即使HAP包不直接依赖HAR包，也能动态跳转到HAR包中的页面，实现模块解耦。
---
## 二、实现步骤（按步骤说明）
### 第一步：创建路由管理模块（RouterModule）
- 使用两个Map存储：
- `builderMap`：存储页面构建器
- `routerMap`：存储路由栈
- 提供注册、获取、跳转等方法
### 第二步：主页面（HAP包）初始化
1. **创建NavPathStack并注册**
```typescript
aboutToAppear() {
this.hapARouter = new NavPathStack();
RouterModule.createRouter("HapA_Router", this.hapARouter);
}
```
2. **使用Navigation组件，绑定动态路由映射**
```typescript
Navigation(this.hapARouter) {
// 内容
}
.navDestination(this.routerMap)
```
3. **创建路由映射Builder**
```typescript
@Builder
routerMap(builderName: string, param: object) {
RouterModule.getBuilder(builderName).builder(param);
}
```
### 第三步：HAR包页面设置
1. **创建页面Builder并注册**
```typescript
@Builder
export function harBuilder(value: object) {
NavDestination() { /* 页面内容 */ }
}
// 注册
let builder = wrapBuilder(harBuilder);
RouterModule.registerBuilder("HarA_Page1_Builder", builder);
```
2. **实现harInit函数（动态导入）**
```typescript
export function harInit(path: string): void {
switch (path) {
case "./src/main/ets/components/mainpage/page1":
import("./src/main/ets/components/mainpage/page1");
break;
}
}
```
### 第四步：执行跳转
- **URL格式**：`{har包名}/{页面路径}/{路由名}-{Builder名}`
- **示例**：`HarA/src/main/ets/components/mainpage/page1/HapA_Router-HarA_Page1_Builder`
- **调用**：`RouterModule.push(url)`
---
## 三、跳转原理（push方法执行流程）
1. **解析URL**：拆分出HAR包名、路由名、Builder名
2. **动态导入**：`await import(harName)` 加载HAR包
3. **初始化页面**：调用 `harInit(path)` 加载具体页面模块
4. **执行跳转**：通过路由栈 `pushPathByName(builderName)` 跳转
---
## 四、核心机制（关键技术点）
1. **动态导入**：使用 `import()` 运行时加载HAR包
2. **Builder包装**：使用 `wrapBuilder()` 将Builder包装成可动态调用的形式
3. **路由栈管理**：通过名称管理多个独立的路由栈
4. **URL路由协议**：通过字符串解析实现灵活跳转
---
## 五、应用场景
- **插件化架构**：功能模块作为HAR包，按需加载
- **模块解耦**：HAP包与HAR包无需编译时依赖
- **按需加载**：减少初始包体积
---
## 六、注意事项（面试可能问到）
1. **动态import限制**：不支持变量表达式，需要用switch替代
2. **Builder必须注册**：页面加载时注册到RouterModule
3. **路由名要一致**：跳转和注册使用相同的路由名
4. **URL格式严格**：必须按固定格式编写
---
## 七、面试回答模板（30秒版本）
> "Navigation动态路由实现了跨模块页面跳转。核心是RouterModule统一管理路由栈和页面构建器。使用步骤：1）主页面创建NavPathStack并注册；2）HAR包页面创建Builder并注册；3）通过URL格式调用push方法跳转。关键技术是动态import加载HAR包，wrapBuilder包装页面构建器，实现运行时动态调用。主要用于插件化架构和模块解耦场景。"
---
## 八、面试回答模板（2分钟详细版）
> "Navigation动态路由解决了跨模块页面跳转的问题，即使HAP包不直接依赖HAR包也能跳转。
>
> **实现分为4步：**
> 1. 创建RouterModule，用Map存储路由栈和Builder
> 2. 主页面创建NavPathStack并注册，Navigation组件绑定动态路由映射
> 3. HAR包页面创建Builder并用wrapBuilder包装后注册，实现harInit函数用于动态导入
> 4. 通过URL格式调用RouterModule.push跳转
>
> **核心机制：**
> - 动态import加载HAR包
> - wrapBuilder包装Builder支持运行时调用
> - URL解析获取路由信息
>
> **应用场景：** 插件化架构、模块解耦、按需加载。需要注意动态import的限制，需要用switch替代变量表达式。"