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

ohos.router路由入门指南

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

前言

本文以eTS-3.1.6.6位版本来说明ohos.router的使用,重点来说明ohos.router怎么传递和接收参数的。 HarmonyOS鸿蒙学习笔记(2)路由ohos.router的使用 关于路由的更多细节说明,参考页面路由鸿蒙官方文档进行学习。注意其中ohos.router模块首批接口从API version 8开始支持

路由跳转传递和接收参数

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

//导入路由import router from ‘@ohos.router‘;@Entry@Componentstruct 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@Componentstruct SecondPage{ build() { Column() { //使用Text文本组件展示路由传参 Text(router.getParams()[‘source‘]).fontSize(30).fontColor(Color.Blue) }.width(‘100%‘) }}

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

import router from ‘@ohos.router‘;@Entry@Componentstruct 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鸿蒙学习的一些零碎的知识,另外鸿蒙OS还提供了Navigator组件实现路由跳转的功,详见HarmonyOS鸿蒙学习笔记(9)Navigator路由导航

参考资料

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

极客网企业会员

免责声明:本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,读者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时,应及时向本网站提出书面权利通知或不实情况说明,并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后,将会依法尽快联系相关文章源头核实,沟通删除相关内容或断开相关链接。