HarmonyOS:ArkTS 页导航

一、什么是页面导航？

就像在手机App里从"首页"点击进入"设置页"，再点"返回"回到首页------这个过程就是页面导航 。在 HarmonyOS 的 ArkTS 开发中，我们使用 router 模块来管理这些跳转。

二、核心概念一览表

概念	说明
`Navigation` 组件	所有页面内容的容器，是实现导航的基础布局组件。
`router.pushUrl()`	打开新页面的方法，将目标页面压入栈顶。
`router.back()` 或 `pop()`	返回上一个页面，当前页面出栈。
页面栈（Page Stack）	系统按顺序保存打开过的页面，后进先出（LIFO）。
参数传递	跳转时可通过 `params` 携带数据到下一个页面。
`getParams()`	在目标页面获取传入的数据。

三、常用方法与示例代码

✅ 示例1：两个页面之间的跳转

假设我们有两个页面：

MainPage.ets（首页）
DetailPage.ets（详情页）

➤ MainPage.ets

TypeScript 复制代码

// 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

TypeScript 复制代码

// 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() 获取数据。