HarmonyOS鸿蒙学习笔记路由ohos.router的使用

Posted 2022-08-28 郭梧悠

ohos.router路由入门指南

• 前言
• 路由跳转传递和接收参数
• 参考资料

前言

本文以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%')
  

比如上面的代码，使用 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%')
  

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

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%')
  

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

到此为止，本篇博文结束，主要讲一些HarmonyOS鸿蒙学习的一些零碎的知识

参考资料

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