前面四篇系列笔记，我们依次掌握了ArkTS五大基础布局、全套基础UI组件、@State响应式状态管理、onClick/onChange两大核心交互事件。截至目前，我们已经可以独立编写结构完整、样式美观、可人机交互的单页面应用。

但日常使用的手机APP，没有任何一款是只有一个页面的：首页、详情页、登录页、个人中心页之间都需要相互切换跳转。想要实现多页面之间的无缝切换，就必须学习鸿蒙核心能力——Router页面路由。

本篇博客结合本人课堂全部实战路由代码：RouterDemo.ets（路由工具封装页）、Index.ets/Index2.ets（应用首页入口）、PageOne.ets（一级跳转页面）、Second.ets（二级跳转页面），从零讲解路由核心概念、两种跳转模式、页面正向传参、页面返回、路由栈原理、开发常见报错与解决方案，搭配全套可直接运行的多页面源码，打通ArkTS单页面到多页面应用的最后一环。

一、路由Router基础核心认知

1. 什么是鸿蒙路由Router？

简单来说，路由就是页面地址管理器，负责管理应用内所有页面的打开、关闭、跳转、参数传递。

鸿蒙ArkTS采用页面栈机制管理所有打开的页面：每打开一个新页面，页面就会压入路由栈；每返回上一页，栈顶页面就会出栈销毁，自动释放内存，保证APP运行流畅。

2. 为什么必须学习路由？

没有路由，所有功能只能堆砌在一个页面中，代码臃肿且无法拆分功能模块；合理使用路由可以做到：

• 拆分功能页面：首页、登录页、详情页分离，代码解耦

• 实现页面正向跳转、反向返回

• 跨页面传递数据，比如首页向详情页传递用户名、ID

• 控制页面生命周期，按需销毁无用页面，优化APP性能

3. 本次课程全部路由文件分工说明

4. 路由前置必备配置（新手必看，不配置直接报错）

鸿蒙所有页面想要实现路由跳转，必须提前在ohm-url.json文件中注册页面路径，路径名称必须和代码中跳转地址完全一致，大小写敏感。

本次项目注册页面路径如下：

{

 "pages": [

   "pages/index/Index",

   "pages/router/PageOne",

   "pages/router/Second",

   "pages/router/RouterDemo"

  ]

}

二、鸿蒙Router两种核心跳转方式（重难点区分）

鸿蒙官方提供两种最常用的页面跳转API，二者底层路由栈逻辑完全不同，适用场景也有明显区别，也是学习和考试的高频考点：

1. router.pushUrl() 保留当前页面跳转

• 执行逻辑：保留当前首页，将新页面压入路由栈，形成页面层级

• 页面栈变化：[首页] → [首页, PageOne]

• 特点：可以返回上一页，点击返回按钮就能回到原页面

• 适用场景：首页跳转详情页、列表跳转内容页（日常开发90%场景都用它）

2. router.replaceUrl() 替换当前页面跳转

• 执行逻辑：关闭并销毁当前页面，用新页面直接替换栈顶页面

• 页面栈变化：[首页] → [PageOne]，首页直接被销毁

• 特点：无法返回上一页，没有返回层级

• 适用场景：登录成功后跳转首页、开屏页跳转主页（不需要回到之前页面）

3. 页面返回API：router.back()

• 作用：退出当前页面，回到路由栈上一级页面

• 注意：如果当前页面是栈内唯一页面，调用back会直接退出应用

三、进阶实战：路由跨页面传参（核心重难点）

实际开发中，跳转页面往往需要携带数据：比如首页点击用户卡片，跳转详情页并传递用户名、年龄、账号信息。Router支持在跳转时携带自定义参数，目标页面直接接收使用。

点击按钮，到达PagesOne

四.路由开发高频踩坑点（本人课堂实战真实报错总结）

1. 坑点1：忘记导入路由模块
   报错提示：router未定义 解决方案：所有用到路由的页面，第一行必须添加 import router from '@ohos.router'

2. 坑点2：页面路径和ohm-url.json注册路径不一致
   大小写、字符写错都会直接跳转失败，路由路径严格区分大小写

3. 坑点3：replaceUrl跳转后无法返回页面
   新手误以为bug，实际是设计逻辑：原页面已经被销毁，适合登录、开屏页场景

4. 坑点4：getParams只能获取上级页面参数，无法向下一级页面回传
   想要二级页面向一级页面回传数据，需要搭配状态变量或者全局存储

5. 坑点5：无限制连续跳转页面，造成路由栈堆积
   频繁pushUrl会让路由栈页面越来越多，占用内存，高频跳转场景建议使用replaceUrl

八、本篇博客总结

• 两大核心跳转：pushUrl保留页面可返回，replaceUrl销毁页面不可返回

• 代码优化：封装RouterDemo工具类，统一管理所有路由地址，减少冗余代码

• 核心逻辑：点击事件触发路由跳转，路由实现页面切换，状态管理页面数据