懂车帝用户4509
借助懂车帝，探索鸿蒙系统中从 Router 切换到 Navigation 的应用开发之道
输入“/”快速插入内容
借助懂车帝，探索鸿蒙系统中从 Router 切换到 Navigation 的应用开发之道
借助懂车帝，探索鸿蒙系统中从 Router 切换到 Navigation 的应用开发之道
用户45092024年7月10日修改
1.
引言
1.1
背景
基于鸿蒙官方文档的介绍，Router路由后续将不做演进，系统路由推荐从Router切换到Navigation。
1.2
本文目的与受众
本文将详细介绍懂车帝在鸿蒙系统中如何低成本从Router切换Navigation 进行应用开发的方法和经验，旨在帮助其他 APP 和业务场景更好地参考和复用，作者假设读者对鸿蒙系统的Router和Navigation，以及npm的相关知识已经有所了解。
2.
准备从 Router 迁移到 Navigation
💡
迁移前后开发方式不用转变，也不用关注Navigation组件，继续使用Entry注解，唯一需要注意的就是onPageShow、onPageHide，onBackPress 方法的转变。
对于迁移成本：整体迁移工作量单人3pd
1.
自定义Router 0.5pd
2.
Hvigor Task编写2pd（从0开始）
3.
API迁移 0.5pd
2.1
准备 Navigation 容器
为了迁移到Navigation我们首先需要准备好一个Navigation容器，
一般来说Navigation容器需要在所有页面的顶级，也就是说下文的Navigation是首页（MainPage）的父组件。
同时为了自己管理路由栈，创建NavPathStack对象选择自己维护（MyRouter）。
代码块
@Entry
export struct MyNavigation {
@State navPathStack: NavPathStack = new NavPathStack()
aboutToAppear(): void {
MyRouter.initRouter(this.navPathStack)
}
build() {
Navigation(this.navPathStack) {
MainPage()
}
.mode(NavigationMode.Stack)
.hideTitleBar(true)
.hideToolBar(true)
.navDestination(myNavDestination)
}
}
2.2
自定义 navDestination 函数
同时为了完成原有Router中的命令式路由功能，我们需要自定义navDestination函数根据不同的路由参数构建不同的页面。
代码块
@Builder
function myNavDestination(name: string, param: object) {
// 这里表示根据不同的name取出不同页面的builder对象构建页面。
MyRouter.getNavDest(name)(param)
}
3.
设计路由
3.1
设计一个Router
接下来我们需要一种方法收集所有的路由制作路由表，首先我们继续完善MyRouter，如下。
新增了一个addNavDest方法用于注册路由页面。
代码块
export class MyRouter {
private static sNavPathStack: NavPathStack | undefined
private static sNavDestEntries: Map<string, WrappedBuilder<[object]>> = new Map()
static initRouter(navPathStack: NavPathStack): void {
MyRouter.sNavPathStack = navPathStack
}
static getNavDest(name: string): WrappedBuilder<[object]> {
return MyRouter.sNavDestEntries.get(name)!
}
static addNavDest(name: string, builder: WrappedBuilder<[object]>) {
MyRouter.sNavDestEntries.set(name, builder)
}
}