news 2026/6/24 1:17:36

Navigation的三种方式之动态路由(自定义路由表动态import)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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替代变量表达式。"

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/23 6:02:13

物流智能调度进阶之路(量子Agent赋能路径优化实战)

第一章:物流智能调度进阶之路(量子Agent赋能路径优化实战)在现代物流系统中,路径优化长期面临组合爆炸难题,传统算法在大规模节点场景下计算效率受限。随着量子计算与多智能体系统(Multi-Agent System, MAS…

作者头像 李华
网站建设 2026/6/23 19:13:20

【医疗多模态Agent权重优化】:揭秘高效模型融合背后的黑科技

第一章:医疗多模态Agent权重优化的背景与意义在现代智慧医疗系统中,多模态Agent通过整合医学影像、电子病历、基因组数据和实时生理信号等多种异构信息源,显著提升了疾病诊断、治疗建议与患者管理的智能化水平。然而,不同模态数据…

作者头像 李华
网站建设 2026/6/23 19:15:42

SD Maid SE安卓版(安卓系统清理器)

SD Maid是一款Android设备的系统清理工具,它能帮助用户清理手机中的不需要的文件和数据,提升设备的性能并节省存储空间。 软件功能 垃圾清理:SD Maid能够扫描并删除设备中的垃圾文件、临时文件和无用的应用程序数据,包括缓存文件…

作者头像 李华
网站建设 2026/6/23 19:17:30

Zoner Photo Studio X(照片编辑管理)

Zoner Photo Studio X是一款功能丰富的照片编辑和管理软件。它提供了许多强大的工具和功能,可以帮助用户轻松地编辑、组织和共享照片。 软件功能 图片编辑:提供了多种编辑工具,包括剪裁、调整色彩、修复红眼、消除瑕疵等,使用户能…

作者头像 李华
网站建设 2026/6/23 19:17:53

音频调试终极指南:ESP32嵌入式语音交互诊断工具

音频调试终极指南:ESP32嵌入式语音交互诊断工具 【免费下载链接】xiaozhi-esp32 Build your own AI friend 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaozhi-esp32 在ESP32嵌入式AI语音设备开发中,音频调试往往是让开发者最头疼的环节…

作者头像 李华
网站建设 2026/6/23 18:00:34

过氧化氢泄漏后应急处置

过氧化氢泄漏后应急处置:从行业痛点到科学应对过氧化氢(H₂O₂)作为强氧化剂,在化工、医疗等领域广泛应用。然而,其具有的腐蚀性、氧化性以及受热易分解特性,使得泄漏风险不容忽视。据行业报告显示&#xf…

作者头像 李华