HarmonyOS:ArkTS 页导航
一、什么是页面导航？
就像在手机App里从“首页”点击进入“设置页”，再点“返回”回到首页——这个过程就是页面导航。在 HarmonyOS 的 ArkTS 开发中，我们使用 router 模块来管理这些跳转。
二、核心概念一览表
| 概念 | 说明 |
|---|---|
Navigation 组件 | 所有页面内容的容器，是实现导航的基础布局组件。 |
router.pushUrl() | 打开新页面的方法，将目标页面压入栈顶。 |
router.back() 或 pop() | 返回上一个页面，当前页面出栈。 |
| 页面栈（Page Stack） | 系统按顺序保存打开过的页面，后进先出（LIFO）。 |
| 参数传递 | 跳转时可通过 params 携带数据到下一个页面。 |
getParams() | 在目标页面获取传入的数据。 |
三、常用方法与示例代码
✅ 示例1：两个页面之间的跳转
假设我们有两个页面：
-
MainPage.ets（首页） -
DetailPage.ets（详情页）
➤ MainPage.ets
// pages/MainPage.ets
@Entry
@Component
struct MainPage {build() {Navigation() {Column({ space: 20 }) {Text('这是首页').fontSize(24).fontWeight('bold')Button('进入详情页').onClick(() => {router.pushUrl('pages/DetailPage', { id: 123, name: '测试商品' });})}.margin(40)}}
}
➤ DetailPage.ets
// pages/DetailPage.ets
@Entry
@Component
struct DetailPage {@State receivedData: any = {};aboutToAppear() {// 页面显示前获取传参const params = router.getParams();this.receivedData = params || {};}build() {Navigation() {Column({ space: 20 }) {Text(`收到的数据：ID=${this.receivedData.id}, 名称=${this.receivedData.name}`).fontSize(18)Button('返回首页').onClick(() => {router.back(); // 返回上一页})}.margin(40)}}
}
四、常见操作对照表
| 操作 | 方法 | 说明 |
|---|---|---|
| 跳转到新页面 | router.pushUrl(path, params) | path 是页面路径，params 可选传参 |
| 返回上一页 | router.back() 或 router.pop() | 关闭当前页面，返回栈中前一个页面 |
| 获取传递参数 | router.getParams() | 在目标页面调用，获取跳转时携带的数据 |
| 防止误退出 | 在 onBackPress 中拦截返回 | 如弹窗确认是否退出编辑 |
五、注意事项提醒
-
❗ 不要频繁重复 push 同一个页面，会导致卡顿或内存浪费。
-
❗
params建议只传基本类型和简单对象，不要传大型图片或函数。 -
✅ 推荐使用相对路径如
'pages/DetailPage'，避免路径错误。 -
✅ 使用
aboutToAppear()生命周期获取参数更安全。
六、总结回顾
通过本笔记的学习，你应该已经掌握了：
-
如何用
Navigation构建可导航界面； -
使用
pushUrl和back实现页面跳转； -
在页面间传递和接收数据；
-
理解页面栈的工作机制。
🎯 小技巧：开发时可以在按钮点击后打印日志，检查是否成功跳转或接收到参数！
知识点：
-
页面栈机制：页面按进入顺序入栈，后进先出，返回即出栈。
-
router.pushUrl() 方法：用于跳转并支持携带参数，触发新页面加载。
-
参数传递与接收：通过 params 传值，目标页用 getParams() 获取数据。