前言

本文以eTS-3.1.6.6位版本来说明ohos.router的使用，重点来说明ohos.router怎么传递和接收参数的。

关于路由的更多细节说明，参考页面路由鸿蒙官方文档进行学习。注意其中ohos.router模块首批接口从API version 8开始支持

路由跳转传递和接收参数

使用路由的时候需要import router from '@ohos.router'，然后就可以使用push或者replace方法进行页面跳转

//导入路由
import router from '@ohos.router';
@Entry
@Component
struct FirstPage {
  build() {
    Row() {
      Column() {
        Image($r('app.media.picture2')).onClick(() => {
          //跳转第二个页面，并且将source参数传递过去
          router.push({ url: 'pages/SecondPage', params: { source: '测试路由参数' } })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

比如上面的代码，使用 router.push({ url: 'pages/SecondPage', params: { source: '测试路由参数' } })跳转第二个页面，并且将source参数传递过去，那么SecondPage怎么接受参数呢，其实也很简单，使用router.getParams()['source']即可，完整的代码如下：

import router from '@ohos.router';

@Entry
@Component
struct SecondPage{
  build() {
    Column() {
     //使用Text文本组件展示路由传参
      Text(router.getParams()['source']).fontSize(30).fontColor(Color.Blue)
    }.width('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

如果数据不止一处使用，我们可以将参数使用一个变量存储起来，代码改动如下：

import router from '@ohos.router';

@Entry
@Component
struct FourthPage {
 //存储路由数据，交给需要的组件使用
  @State text: string = router.getParams()['source']
  build() {
    Column() {
      Text(this.text).fontSize(30).fontColor(Color.Blue)
    }.width('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

可以看到将text变量使用了 @State注解，其实测试发现将 @State去掉也是可以的。那么 @State的作用是什么呢？官方文档给的说明是：@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新,这点有点像Flutter的StatefulWidget机制，状态改变时会刷新UI。详见@State注解官方说明

到此为止，本篇博文结束，主要讲一些HarmonyOS鸿蒙学习的一些零碎的知识，另外鸿蒙OS还提供了Navigator组件实现路由跳转的功，详见HarmonyOS鸿蒙学习笔记（9）Navigator路由导航

参考资料

页面路由鸿蒙官方文档
@State注解官方说明
使用eTS语言开发