页面跳转和两个页面之间的数据传递-鸿蒙ArkTS

页面跳转和两个页面之间的数据传递-ArkTS

  • 页面跳转和两个页面之间的数据传递-ArkTS
    • 关于router的使用
    • **跳转页面的实现方式。**
    • 页面接受跳转传递的参数
    • 页面返回及携带参数
    • 效果
    • 代码
      • Index页面
      • Second页面
    • 参考资料

页面跳转和两个页面之间的数据传递-ArkTS

本篇文章主要是对两个页面之间数据传递进行实现。

在这里插入图片描述

在这里插入图片描述

关于router的使用

页面跳转和参数接受是通过导入 router 模块实现。

import router from '@ohos.router';
  • router.pushUrl() 跳转到指定页面。
  • **router.replaceUrl() **替换当前页面并销毁。
  • **router.back() ** 返回上一个页面。
  • router.getParams() 获取上一个页面跳转过来携带的参数。
  • router.clear() 清空当前页面栈中所有历史页面,只会保留当前页面作为栈顶页面。
  • router.getLength() 获取当前页面栈中的页面数量。
  • router.getState() 获取当前页面的状态信息。
  • router.showAlertBeforeBackPage() 开启页面返回询问对话框。
  • router.hideAlertBeforeBackPage() 禁用页面返回询问对话框。

跳转页面的实现方式。

API9及以上,router.pushUrl()方法新增了mode参数,可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

router.pushUrl()方法内的基本参数

router.pushUrl({// 跳转页面路径url: '页面',// 跳转携带的参数params: {变量名:值}
}, 当前模式)

方式一

在多实例模式下:如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近同url页面会被移动到栈顶,移动后的页面为新建页,原来的页面仍然存在栈中,页面栈的元素数量不变;如果目标页面的url在页面栈中不存在同url页面,按多实例模式跳转,页面栈的元素数量会加1。

// params对象内的变量是可以自定义参数名的,任意名称都可以只要在接受的时候通过传递时过来的变量名称就可以的。
router.pushUrl({url: 'pages/Second',params: {name: 'Index页面传递'}
}, router.RouterMode.Single)

方式二

在单实例模式下:如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近同url页面会被移动到栈顶,替换当前页面,并销毁被替换的当前页面,移动后的页面为新建页,页面栈的元素数量会减1;如果目标页面的url在页面栈中不存在同url页面,按多实例模式跳转,页面栈的元素数量不变。

// params对象内的变量是可以自定义参数名的,任意名称都可以只要在接受的时候通过传递时过来的变量名称就可以的。
router.pushUrl({url: 'pages/Second',params: {name: 'Index页面传递'}
}, router.RouterMode.Standard)

页面接受跳转传递的参数

通过 router.getParams() 方法获取页面传递过来的自定义参数。

import router from '@ohos.router'
@Entry
@Component
struct Second {// 用于接受由页面跳转传递的参数名称@State str: string = router.getParams()?.['name']// 页面刷新展示....}

页面返回及携带参数

返回上一个页面

router.back();

返回指定页面

router.back({url: 'pages/Index'});

返回并携带参数

// 需要在 router.back() 方法内类似 router.pushUrl() 的用法
router.back({url: 'pages/Index',params: {src: 'Second传回来的数据'}
})

接收返回的参数

import router from '@ohos.router'
@Entry
@Component
struct Index {//定义一个变量来接收返回的参数@State src: string = ''// 这是一个生命周期,当页面每次显示的时候都会调用onPageShow(){// 通过拿到 router 中名称为 src 的值this.src = router.getParams()?.['src']}build() {Row() {Column() {// 将返回接收到的值显示Text(this.src)Button('Next').width("90%").onClick(() => {router.pushUrl({url: 'pages/Second',params: {name: 'Index页面传递'}}, router.RouterMode.Single)})}.width('100%')}.height('100%').backgroundColor('#efefef')}
}

效果

在这里插入图片描述

在这里插入图片描述

代码

Index页面

import router from '@ohos.router'
@Entry
@Component
struct Index {@State message: string = 'Hello World'@State src: string = ''onPageShow(){this.src = router.getParams()?.['src']}build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text(this.src)Button('Next').width("90%").onClick(() => {router.pushUrl({url: 'pages/Second',params: {name: 'Index页面传递'}}, router.RouterMode.Single)})}.width('100%')}.height('100%').backgroundColor('#efefef')}
}

Second页面

import router from '@ohos.router'
@Entry
@Component
struct Second {@State message: string = 'Hello World'@State str: string = router.getParams()?.['name']build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text(this.str)Button('back').onClick(() => {router.back({url: 'pages/Index',params: {src: 'Second传回来的数据'}})}).width("90%")}.width('100%')}.height('100%').backgroundColor('#efefef')}
}

参考资料

官网文档

官网视频对应文档

router参考文档

官网视频

官网对应视频

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37174.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TiDB在科捷物流神州金库核心系统的应用与实践

业务背景 北京科捷物流有限公司于2003年在北京正式成立,是ISO质量管理体系认证企业、国家AAAAA级物流企业、海关AEO高级认证企业,注册资金1亿元,是中国领先的大数据科技公司——神州控股的全资子公司。科捷物流融合B2B和B2C的客户需求&#…

matlab使用教程(15)—图论基础

1.有向图和无向图 1.1什么是图? 图是表示各种关系的节点和边的集合: • 节点 是与对象对应的顶点。 • 边 是对象之间的连接。 • 图的边有时会有权重 ,表示节点之间的每个连接的强度(或一些其他属性)。 这些定…

MySQL8.xx一主两从复制安装与配置

搭建环境: 查看系统版本cat /etc/redhat-release [rootwww tools]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) 查看内核版本cat /proc/version 目标: 一主两从 主机IP 主机名称 端口 搭建环境 安装目录192.168.1.100 docker…

19.正则表达式

19.1什么是正则表达式 ●正则表达式( Regular Expression) 是用于匹配字符串中字符组合的模式。在JavaScript中, 正则表达式也是对象 ●通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式 ●正则表达式在JavaScript中的使用场景: …

8.15号经典模型复习笔记

文章目录 Deep Residual Learning for Image Recognition(CVPR2016)方法 Densely Connected Convolutional Networks(CVPR2017)方法 EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks(ICML2019)方法 Re…

使用维纳过滤器消除驾驶舱噪音(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

Tomcat的多实例和动静分离

目录 一、多实例 二、 nginxtomcat的负载均衡和动静分离 三、Tomcat 客户端->四层代理->七层代理->tomcat服务器 实验: 问题总结: tomcat日志文件:/usr/local/tomcat/logs/catalina.out 一、多实例 在一台服务器上有多个tomc…

解压版 MySQL 数据库的安装与配置

目录 1 下载2 安装3 配置3.1 添加环境变量3.2 新建配置文件3.3 初始化MySQL3.4 注册MySQL服务3.5 启动MySQL服务3.6 修改默认账户密码 4 登录5 卸载 安装环境:Win10 64位 软件版本:MySQL 5.7.24 解压版 1 下载 点击链接 进入如下界面 ❗️注意: 我们一般不会选择最新…

RocketMQ 5.1.0 源码详解 | Producer 发送流程

文章目录 初始化DefaultMQProducer实例发送流程DefaultMQProducer#sendDefaultMQProducerImpl#sendMQClientInstance#updateTopicRouteInfoFromNameServer使用特定 topic 获取路由信息使用默认 topic 获取路由信息 DefaultMQProducerImpl#sendDefaultImpl发送流程总结 初始化De…

31 | 独角兽企业数据分析

独角兽企业:是投资行业尤其是风险投资业的术语,一般指成立时间不超过10年、估值超过10亿美元的未上市创业公司。 项目目的: 1.通过对独角兽企业进行全面地分析(地域,投资方,年份,行业等),便于做商业上的战略决策 项目数据源介绍 1.数据源:本项目采用的数据源是近…

文档控件DevExpress Office File API v23.1新版亮点 - 支持.NET MAUI

DevExpress Office File API是一个专为C#, VB.NET 和 ASP.NET等开发人员提供的非可视化.NET库。有了这个库,不用安装Microsoft Office,就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS, XLSx, DOC, DOCx, RTF, CS…

nginx一般轮询、加权轮询、ip_hash等负载均衡模式配置介绍

一.负载均衡含义简介 二.nginx负载均衡配置方式 准备三台设备: 2.190均衡服务器,2.191web服务器1,2.160web服务器2,三台设备均安装nginx,两台web服务器均有网页内容 1.一般轮询负载均衡 (1&#xff09…

ARTS 挑战打卡的第9天 --- 如何知道一个数是否为2的若干次幂(Algorithm)

前言 (1)今天看到一个有意思的问题,如何判断一个数字是否为2的若干次幂。这个问题并不难,但是对于我们的C语言功底还是有一点点的考验的。 (2)希望各位可以先自行思考,实在想不出来再看后面的讲…

rabbitmq的消息应答

消费者完成一个任务可能需要一段时间,如果其中一个消费者处理一个长的任务并仅只完成 了部分突然它挂掉了,会发生什么情况。RabbitMQ 一旦向消费者传递了一条消息,便立即将该消 息标记为删除。在这种情况下,突然有个消费者挂掉了…

数据分析两件套ClickHouse+Metabase(一)

ClickHouse篇 安装ClickHouse ClickHouse有中文文档, 安装简单 -> 文档 官方提供了四种包的安装方式, deb/rpm/tgz/docker, 自行选择适合自己操作系统的安装方式 这里我们选deb的方式, 其他方式看文档 sudo apt-get install -y apt-transport-https ca-certificates dirm…

魔改 axuanup 的 aardio和python 猜拳游戏 代码

根据 axuanup 的 aardio和python 猜拳游戏 代码,魔改了一个风格不一样的代码。 争取做到代码尽量“简”,但还没到“变态简”的程度,因为还能看懂。 原文:aardio和python 猜拳游戏-自由交流乐园-Aardio资源网 代码如下&#xff…

【Flutter】【基础】CustomPaint 绘画功能(一)

功能:CustomPaint 相当于在一个画布上面画画,可以自己绘制不同的颜色形状等 在各种widget 或者是插件不能满足到需求的时候,可以自己定义一些形状 使用实例和代码: CustomPaint: 能使你绘制的东西显示在你的ui 上面&a…

竞赛项目 酒店评价的情感倾向分析

前言 🔥 优质竞赛项目系列,今天要分享的是 酒店评价的情感倾向分析 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🧿 更多资料, 项目分享: https://gitee.com/dancheng-senior/post…

用Python做一个滑雪小游戏

游戏是让人娱乐和放松的好方式,而编写和玩自己的游戏则是一种特别有趣的体验。在本文中,我们将使用Python和pygame库来创建一个简单的滑雪小游戏。通过这个小游戏项目,我们将学习如何使用Python编程语言来制作自己的游戏,并且享受…