鸿蒙开发：ArkTs界面跳转详细介绍 原创

页面跳转可以分为页面内跳转和页面间跳转，页面内跳转是指所跳转的页面在同一个 Ability 内部，它们之间的跳转可以使用 Router 或者 Navigator 的方式；页面间跳转是指所跳转的页面属与不同的 Ability ，这种跳转需要借助 featureAbility 实现，跳转示意图如下所示：

页面内跳转
页面内跳转的实现比较简单，直接使用ArkUI开发框架提供的 Router 或者 Navigator 就可以了， Navigator 本质上是对 Router 的封装，这里就简单介绍一下 Router 的使用，想了解 Navigator 的小伙伴请参考官网文档。

基本概念
页面路由：管理应用内页面之间的导航，支持跳转、传参、返回等操作。
页面栈：HarmonyOS 使用页面栈管理页面层级，push 添加新页面，pop 移除当前页面
push：打开新的页面，新页面在栈顶位置， RouterOptions 定义了以下参数：
url：目标页面的路径，该路径必须在 config.json 的 pages 下配置，否则不起作用。
params：可选参数，向目标页面传递参数。
replace：新页面替换当前页面并把当前页面销毁。
back：返回上一页。
clear：清空路由栈里的其它页面。
getLength：获取当前路由栈里的页面数量。
getState：获取当前页面的状态， RouterState参数说明如下：
index：当前页面是第几个打开的。
path：当前页面的路径。
name：当前页面的名称。
enableAlertBeforeBackPage：
disableAlertBeforeBackPage：
getParams：获取通过路由传递过来的参数。

router使用说明
引入router
使用 router 之前，先要引入 router ，引入方式如下：

    import router from '@ohos.router';

页面跳转
页面跳转使用 router.push 方法，简单样例如下所示：

// 第一个页面
 @Entry @Component struct ComponentTest {
   build() {
     Column({space: 10}) {
       Text('第一个页面')
         .fontSize(30)
         .width('100%')
         .textAlign(TextAlign.Center)

       Button('打开下一页')
         .onClick(() => {
           router.push({          // 使用push入栈一个新页面
             url: "pages/second"  // 通过url指定新打开的页面
           })
         })
     }
     .size({width: '100%', height: '100%'})
   }
 }

 // 第二个页面
 @Entry @Component struct Second {

   build() {
     Column({space: 10}) {
       Text('第二个页面')
         .fontSize(30)
         .width('100%')
         .textAlign(TextAlign.Center)

       Button('返回上一页')
         .onClick(() => {
           router.back(); // 返回上一页，当前页面会销毁
         })
     }
     .size({width: '100%', height: '100%'})
   }
 }

替换当前页面（replace）

router.replaceUrl({
  url: 'pages/NewPage' // 替换当前页面，无法返回
})

返回上一页（back）

router.back(); // 返回上一页
router.back({ url: 'pages/Index' }); // 返回到指定页面

目标页面接收参数

@Entry
@Component
struct Detail {
  private params: object = router.getParams() || {};

  build() {
    Column() {
      Text(`ID: ${this.params['id']}`)
      Text(`Name: ${this.params['name']}`)
    }
  }
}

页面返回带参数
通过 router.showAlertBeforeBackPage 或自定义事件传递数据：

// 返回前设置参数
router.back({ 
  url: 'pages/Index',
  params: { result: 'success' }
});

注意事项
页面栈限制：FA 模型最多 32 层，Stage 模型无硬性限制。

参数类型：只能传递可序列化的数据（字符串、数字、布尔值等）。

路由模式：支持 Standard（默认）和 Single（单例模式，复用页面）。

生命周期：跳转时会触发目标页面的 aboutToAppear 和原页面的 aboutToDisappear。
示例场景
场景：列表页跳转到详情页

// 列表页跳转逻辑
router.pushUrl({
  url: 'pages/Detail',
  params: { itemId: 456 }
})
// 详情页接收参数
const itemId = router.getParams()['itemId'];

常见问题
1.如何监听返回按钮事件？
在页面中重写 onBackPress() 方法：

onBackPress() {
  // 自定义逻辑
  return true; // 阻止默认返回行为
}

2.如何清除页面栈？
使用 router.clear() 清空所有历史页面。
3.页面跳转动画
默认使用系统动画，暂不支持自定义（需关注 HarmonyOS 版本更新）。
…