前言

本文以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鸿蒙学习的一些零碎的知识，另外鸿蒙OS还提供了Navigator组件实现路由跳转的功，详见HarmonyOS鸿蒙学习笔记（9）Navigator路由导航

参考资料

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

HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用相关推荐

HarmonyOS鸿蒙学习笔记（12）@Link的作用
通过HarmonyOS鸿蒙学习笔记(5)@State作用说明和简单案例一文我们知道@State修饰的变量发生变化时,会刷新相关页面更新UI.如果是子组件想要改变父组件的状态从而刷新UI改怎么办呢?比如 ...
HarmonyOS鸿蒙学习笔记（11）Flex组件alignItems属性说明
Flex组件alignItems属性 1.代码示例 2.FlexDirection.Row情况下各个ItemAlign的运行情况. 2.1.alignItems:ItemAlign.Auto的运行效果 ...
angular路由笔记_Angular2学习笔记——路由器模型（Router）
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
十、vue-router学习笔记——认识路由、vue-router基本使用、vue-router嵌套路由、vue-router参数传递、vue-router导航守卫、keep-alive
一.认识路由 1.1 什么是路由? 说起路由你想起了什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. - 维基百科额, 啥玩意? ...
网络工程师学习笔记——RIP路由汇总实验配置精讲
一.RIP路由汇总功能介绍 rip的路由汇总功能,能够对rip 学习/自己产生的明细路由做汇总后传递给rip邻居,减少路由器的路由条目需要更多网工学习资料,HCIA/HCIP/HCIE学习视频,可 ...
node.js 学习笔记三:路由url
一.修改server.js var http = require("http"); var url = require("url"); //导入内置url模块f ...
华为产品技术学习笔记之路由原理（二）
华为路由系统平平台VRP5.50支持静态路由和RIP.OSPF.IS-IS.BGP等动态路由. 1.静态路由: 优点:配置方便.系统要求低缺点:不能自动适应网络拓扑变化应用:拓扑结构简单.小型网络 ...
Vue学习笔记：路由详解
路由:Hash地址与页面的对应关系. 1.vue-router的基本使用 (1)安装vue-roouter包 npm i vue-roouter@3.5.2 -S (2)创建路由模块在src源代码目 ...
CCNA学习笔记--静态路由
1.静态路由介绍路由器在转发数据时,要先在路由表(routing table)中查找相应的路由.路由器有这么三种途径建立路由: (1) 直连网络:路由器自动添加和自己直接连接的网络的路由 (2) ...

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

ohos.router路由入门指南

前言

路由跳转传递和接收参数

参考资料

HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用相关推荐

最新文章

热门文章