HarmonyOS ArkUI实战开发-页面跳转（Router、Ability）

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

本节将简单介绍这两种方式的页面跳转。

页面内跳转

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

router定义介绍

declare namespace router {
  function push(options: RouterOptions):void;
  function replace(options: RouterOptions):void;
  function back(options?: RouterOptions ):void;
  function clear():void;
  function getLength():string;
  function getState():RouterState;
  function enableAlertBeforeBackPage(options: EnableAlertOptions):void;
  function disableAlertBeforeBackPage():void;
  function getParams(): Object;
}
1
2
3
4
5
6
7
8
9
10
11

• 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';
1

• 页面跳转

  页面跳转使用 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%'})
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

• 参数传递

  当通过 router 打开新页面需要传递参数时，可以使用 RouterOptions 的 params 参数传递一个对象，然后在接收方以 router.getParams() 的方式拿到传递过来的对象，取值的话以 .key 的形式取值（注意：从 3.1.6.5 版本起，取值方式变更为 ['key'] 的形式），样例如下：

    // 第一个页面
    @Entry @Component struct ComponentTest {

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

          Button('打开下一页')
            .onClick(() => {
              router.push({
                url: "pages/second",  // 打开新页面
                params: {value: 'Hi'} // 给新页面传递一个对象，key为value，取值以.value的形式
              })
            })
        }
        .size({width: '100%', height: '100%'})
      }
    }

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

      // 3.1.5.5版本之前，取值方式为：router.getParams().key
      private value: string = router.getParams().value;

      // 从3.1.6.5版本起，取值方式为：router.getParams()['key']
      private value: string = router.getParams()['value'];

      build() {
        Column({space: 10}) {
          Text('第二个页面：' + this.value) // 使用获取过来的参数
            .fontSize(30)
            .width('100%')
            .textAlign(TextAlign.Center)

          Button('返回上一页')
            .onClick(() => {
              router.back();              // 返回上一页
            })
        }
        .size({width: '100%', height: '100%'})
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46