鸿蒙Harmony-页面路由（router）详解

慢慢理解世界，慢慢更新自己，希望你的每一个昨天，今天，和明天都会很快乐，你知道的，先好起来的从来都不是生活，而是你自己 

目录

一，定义

二，页面跳转

2.1使用router.pushUrl

2.2 使用router.replaceUrl

2.3 使用Single模式

2.4 带参数的跳转

 三，页面返回

 3.1返回到上一个页面

3.2 返回到指定页面

3.3返回到指定页面，并传递自定义参数信息

 四，页面返回前增加一个询问框

4.1系统默认询问框

4.2 自定义询问框

一，定义

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

Router适用于模块间与模块内页面切换，通过每个页面的url实现模块间解耦。模块内页面跳转时，为了实现更好的转场动效场景不建议使用该模块，推荐使用Navigation。

二，页面跳转

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。

Router模块提供了两种跳转模式，分别是router.poshUrl()和router.replaceUrl()。这两种模式决定了目标页面是否会替换当前页。

router.pushUrl()：目标页面不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。

router.replaceUrl()：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

 ！注意：页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

同时，Router模块提供了两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。

Single：单实例模式。如果目标页面的url已经存在于页面栈中，则会将离栈顶最近的同url页面移动到栈顶，该页面成为新建页。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

2.1使用router.pushUrl

1，添加页面路径

{"src": ["pages/Index","pages/FirstPage","pages/SecondPage"]
}

2，编写第一个页面

import router from '@ohos.router'@Entry
@Component
struct FirstPage {aboutToAppear(){console.error("yz---aboutToAppear")}onPageShow(){console.error("yz---onPageShow")}onBackPress(){console.error("yz---onBackPress")}aboutToDisappear(){console.error("yz---aboutToDisappear")}onPageHide(){console.error("yz---onPageHide")}onDestroy(){console.error("yz---onDestroy")}build() {Column() {Text("第一页")Text("跳转下一页").width("50%").height("30%").onClick(()=>{router.pushUrl({ url: "pages/SecondPage"})})}.width("100%").height("100%")}
}

3，编写第二个页面

import router from '@ohos.router'@Entry
@Component
struct SecondPage {build() {Column() {Text("第二页")Text("返回上一页").width("50%").height("30%").onClick(()=>{router.pushUrl({ url: "pages/FirstPage"})})}.width("100%").height("100%")}
}

运行：

点击下一页

日志：

2.2 使用router.replaceUrl

import router from '@ohos.router'@Entry
@Component
struct FirstPage {aboutToAppear(){console.error("yz---aboutToAppear")}onPageShow(){console.error("yz---onPageShow")}onBackPress(){console.error("yz---onBackPress")}aboutToDisappear(){console.error("yz---aboutToDisappear")}onPageHide(){console.error("yz---onPageHide")}onDestroy(){console.error("yz---onDestroy")}build() {Column() {Text("第一页")Text("跳转下一页").width("50%").height("30%").onClick(()=>{router.replaceUrl({ url: "pages/SecondPage"})})}.width("100%").height("100%")}
}

日志输出：

2.3 使用Single模式

import router from '@ohos.router'@Entry
@Component
struct FirstPage {aboutToAppear(){console.error("yz---aboutToAppear")}onPageShow(){console.error("yz---onPageShow")}onBackPress(){console.error("yz---onBackPress")}aboutToDisappear(){console.error("yz---aboutToDisappear")}onPageHide(){console.error("yz---onPageHide")}onDestroy(){console.error("yz---onDestroy")}build() {Column() {Text("第一页")Text("跳转下一页").width("50%").height("30%").onClick(()=>{router.pushUrl({ url: "pages/SecondPage"},router.RouterMode.Single)})}.width("100%").height("100%")}
}

运行输出：

2.4 带参数的跳转

如果需要在跳转时传递一些数据给目标页面，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数。

1，定义一个data类：

import YuanZhen from './YuanZhen';export default class Data {id: number = 0;info: YuanZhen|null = null;constructor(id: number, info: YuanZhen) {this.id = id;this.info = info;}
}

2，在第一页传递参数，跳转下一页

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct FirstPage {@State yuanZhen:YuanZhen =new YuanZhen("袁震",18)aboutToAppear(){console.error("yz---aboutToAppear")}onPageShow(){console.error("yz---onPageShow")}onBackPress(){console.error("yz---onBackPress")}aboutToDisappear(){console.error("yz---aboutToDisappear")}onPageHide(){console.error("yz---onPageHide")}onDestroy(){console.error("yz---onDestroy")}build() {Column() {Text("第一页")Text("跳转下一页").width("50%").height("30%").onClick(()=>{router.pushUrl({ url: "pages/SecondPage", params: new Data(222,this.yuanZhen)},router.RouterMode.Single)})}.width("100%").height("100%")}
}

3，在第二页接收第一页的参数并展示

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct SecondPage {yuanZhen : YuanZhen =new YuanZhen("袁震2",10)aboutToAppear(){let params:Data  =router.getParams() as Datathis.yuanZhen =params.info as YuanZhen}build() {Column() {Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)Text("返回上一页").width("50%").height("30%").onClick(()=>{router.replaceUrl({ url: "pages/FirstPage"})})}.width("100%").height("100%")}
}

跳转到第二页后展示第一页传过来的数据 

 三，页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。在返回的过程中，可能需要将数据传递给目标页面，这就需要用到数据传递功能。

 3.1返回到上一个页面

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct SecondPage {yuanZhen : YuanZhen =new YuanZhen("袁震2",10)aboutToAppear(){let params:Data  =router.getParams() as Datathis.yuanZhen =params.info as YuanZhen}build() {Column() {Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)Text("返回上一页").width("50%").height("30%").onClick(()=>{router.back()})}.width("100%").height("100%")}
}

3.2 返回到指定页面

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct SecondPage {yuanZhen : YuanZhen =new YuanZhen("袁震2",10)aboutToAppear(){let params:Data  =router.getParams() as Datathis.yuanZhen =params.info as YuanZhen}build() {Column() {Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)Text("返回上一页").width("50%").height("30%").onClick(()=>{router.back({url:'pages/FirstPage'})})}.width("100%").height("100%")}
}

3.3返回到指定页面，并传递自定义参数信息

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct SecondPage {yuanZhen : YuanZhen =new YuanZhen("袁震2",10)aboutToAppear(){let params:Data  =router.getParams() as Datathis.yuanZhen =params.info as YuanZhen}build() {Column() {Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)Text("返回上一页").width("50%").height("30%").onClick(()=>{router.back({url:'pages/FirstPage',params: {info: '来自第二页'}})})}.width("100%").height("100%")}
}

这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页面中通过调用router.getParams()方法进行获取和解析。

在目标页面中，在需要获取参数的位置调用router.getParams()方法即可：

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct FirstPage {@State yuanZhen:YuanZhen =new YuanZhen("袁震",18)aboutToAppear(){console.error("yz---aboutToAppear")}onPageShow(){console.error("yz---onPageShow:"+JSON.stringify(router.getParams()))}onBackPress(){console.error("yz---onBackPress")}aboutToDisappear(){console.error("yz---aboutToDisappear")}onPageHide(){console.error("yz---onPageHide")}onDestroy(){console.error("yz---onDestroy")}build() {Column() {Text("第一页")Text("跳转下一页").width("50%").height("30%").onClick(()=>{router.pushUrl({ url: "pages/SecondPage", params: new Data(222,this.yuanZhen)},router.RouterMode.Single)})}.width("100%").height("100%")}
}

输出：

 注意：

当使用router.back()方法返回到指定页面时，原栈顶页面（包括）到指定页面（不包括）之间的所有页面栈都将从栈中弹出并销毁。

另外，如果使用router.back()方法返回到原来的页面，原页面不会被重复创建，因此使用@State声明的变量不会重复声明，也不会触发页面的aboutToAppear()生命周期回调。如果需要在原页面中使用返回页面传递的自定义参数，可以在需要的位置进行参数解析。例如，在onPageShow()生命周期回调中进行参数解析。

 四，页面返回前增加一个询问框

在开发应用时，为了避免用户误操作或者丢失数据，有时候需要在用户从一个页面返回到另一个页面之前，弹出一个询问框，让用户确认是否要执行这个操作。

4.1系统默认询问框

为了实现这个功能，可以使用页面路由Router模块提供的两个方法：router.showAlertBeforeBackPage()和router.back()来实现这个功能。

如果想要在目标界面开启页面返回询问框，需要在调用router.back()方法之前，通过调用​​​​​​​router.showAlertBeforeBackPage()方法设置返回询问框的信息

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'@Entry
@Component
struct SecondPage {yuanZhen : YuanZhen =new YuanZhen("袁震2",10)aboutToAppear(){let params:Data  =router.getParams() as Datathis.yuanZhen =params.info as YuanZhen}build() {Column() {Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)Text("返回上一页").width("50%").height("30%").onClick(()=>{router.showAlertBeforeBackPage({message:"确认退出吗？"})router.back({url:'pages/FirstPage',params: {info: '来自第二页'}})})}.width("100%").height("100%")}
}

 

4.2 自定义询问框

自定义询问框的方式，可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'
import promptAction from '@ohos.promptAction'@Entry
@Component
struct SecondPage {yuanZhen : YuanZhen =new YuanZhen("袁震2",10)aboutToAppear(){let params:Data  =router.getParams() as Datathis.yuanZhen =params.info as YuanZhen}build() {Column() {Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)Text("返回上一页").width("50%").height("30%").onClick(()=>{promptAction.showDialog({message:"您确认退出吗",buttons:[{text:"不确认",color:"#232"},{text:"确认",color:"#262"}]}).then((result:promptAction.ShowDialogSuccessResponse)=>{if(result.index==0){// 用户点击了“取消”按钮}else if(result.index==1){router.back()}}).catch((error:Error)=>{console.error("yz----返回错误")})})}.width("100%").height("100%")}
}

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

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

相关文章

【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

在前后端的交互中，前端通过以下三种方式来与后端进行交互🌟 ✅query string ✅form表单 ✅JSON字符串 下面我们将书写这三种方式的后端代码并进行讲解 1、Query String QueryString即在url中写入键值对，一般用doGet方法进行交互 代码如下 …
阅读更多...
2018年认证杯SPSSPRO杯数学建模D题(第一阶段)投篮的最佳出手点全过程文档及程序

2018年认证杯SPSSPRO杯数学建模D题(第一阶段)投篮的最佳出手点全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 对于投篮最佳出手点的探究 D题 投篮的最佳出手点 原题再现： 影响投篮命中率的因素不仅仅有出手角度、球感、出手速度，还有出手点的选择。规范的投篮动作包含两膝微屈、重心落在两脚掌上、下肢蹬地发力、身体随之向前上…
阅读更多...
H3C校园网双出口配置

H3C校园网双出口配置

H3C校园网双出口配置 🏆荣誉认证：51CTO博客专家博主、TOP红人、明日之星；阿里云开发者社区专家博主、技术博主、星级博主。 💻微信公众号：微笑的段嘉许 📌本文由微笑的段嘉许原创！ &#x1f389…
阅读更多...
服务器推送数据你还在用 WebSocket么？

服务器推送数据你还在用 WebSocket么？

当涉及到推送数据时,人们首先会想到 WebSocket。 的确,WebSocket 允许双向通信,可以自然地用于服务器到浏览器的消息推送。 然而,如果只需要单向的消息推送,HTTP 通过服务器发送的事件也有这种功能。 WebSocket 的通信过程如下: 首先,通过 HTTP 切换协议。服务器返回 101 状…
阅读更多...
驾驭数字孪生：智慧水利的未来之路

驾驭数字孪生：智慧水利的未来之路

一、数字孪生技术的原理与实践 随着科技的不断进步，数字孪生技术作为一项创新的技术应用，正在逐渐改变我们的生活和工作方式。特别是在工业领域，数字孪生技术被视为实现智能制造、提升生产效率和产品质量的重要手段。本章节将深入探讨数字孪…
阅读更多...
k8s的对外服务--ingress

k8s的对外服务--ingress

service作用体现在两个方面 1、集群内部 不断跟踪pod的变化，更新endpoint中的pod对象，基于pod的IP地址不断变化的一种服务发现机制 2、集群外部 类似负载均衡器，把流量ip端口，不涉及转发url（http，https&a…
阅读更多...
npm依赖库备份

npm依赖库备份

常用命令 设置默认使用本地缓存安装Nodejs时会自动安装npm，但是局路径是C:\Users\Caffrey\AppData\Roaming\npm默认的缓存路径是C:\Users\Caffrey\AppData\Roaming\npm-cache；查看npm的prefix和cache路径配置信息设置路径 设置默认使用本地缓存 npm con…
阅读更多...
本周五上海见 第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛（上海站）即将召开

本周五上海见 第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛（上海站）即将召开

低时延技术是证券基金期货领域业务系统的核心技术，是打造极速交易系统领先优势的关键，也是证券基金行业关注的前沿技术热点。 1月19日下午，第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛（上海站）即…
阅读更多...
springmvc上传与下载

springmvc上传与下载

文件上传 结构图 导入依赖 <dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>org.springframework</groupId><artifactId…
阅读更多...
MySQL之视图索引

MySQL之视图索引

学生表&#xff1a;Student (Sno, Sname, Ssex , Sage, Sdept) 学号&#xff0c;姓名&#xff0c;性别&#xff0c;年龄&#xff0c;所在系 Sno为主键 课程表&#xff1a;Course (Cno, Cname,) 课程号&#xff0c;课程名 Cno为主键 学生选课表&#xff1a;SC (Sno, Cno, Score)…
阅读更多...
VSCODE使用CMAKE显示命令无法找到

VSCODE使用CMAKE显示命令无法找到

背景&#xff1a;使用了code server&#xff0c;安装CMAKE和CMAKE TOOLS&#xff0c;但是通过ctrlshiftp打开命令面板&#xff0c;运行随便一个cmake指令&#xff0c;都出现了指令无法找到。具体为“命令"CMake: 配置"导致错误 (command ‘cmake.configure’ not fou…
阅读更多...
GPT APP的开发步骤

GPT APP的开发步骤

开发一个GPT&#xff08;Generative Pre-trained Transformer&#xff09; Store&#xff08;存储&#xff09;涉及到使用预训练的语言模型&#xff08;例如GPT-3&#xff09;来生成和管理内容。以下是一般的步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&…
阅读更多...
探索设计模式的魅力：抽象工厂模式的艺术

探索设计模式的魅力：抽象工厂模式的艺术

抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;用于在不指定具体类的情况下创建一系列相关或相互依赖的对象。它提供了一个接口&#xff0c;用于创建一系列“家族”或相关依赖对象&#xff0c;而无需指定它们的具体类。 主要参…
阅读更多...
[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05-1+2

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05-1+2

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05-12 1. Recursive Algirithm 递归算法2. Data Fusion 数据融合Covarince Matrix协方差矩阵State Space状态空间方程 Observation观测器 1. Recursive Algirithm…
阅读更多...
docker环境下mongo副本集的部署及异常修复

docker环境下mongo副本集的部署及异常修复

最近更换了办公地点。部署在本地docker环境里的mongo数据库不能使用了。原因是本地的ip地址变更。以前的mongo副本集的配置需要更新。处理完后&#xff0c;索性重新记录一下mongo副本集在docker中的部署流程。 mongo的事务及副本集 我们先了解一下什么是事务&#xff0c;事务…
阅读更多...
selenium-java中切换iframe

selenium-java中切换iframe

1、当iframe中有固定的name或者id时可以通过name和id进行切换,代码如下 driver.switchTo().frame("name"); 2、当iframe中没有固定的name或者id时可以通过iframe角标进行切换&#xff0c;在浏览器通过ctrlf快捷键&#xff0c;搜索标签框输入//iframe;来查看当前ifr…
阅读更多...
VsCode 常见的配置

VsCode 常见的配置

转载&#xff1a;Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】 - 知乎 (zhihu.com) 一、VsCode 常见的配置 1、取消更新 把插件的更新也一起取消了 2、设置编码为utf-8&#xff1a;默认就是了&#xff0c;不用设置了 3、设置常用的…
阅读更多...
Chrome 开发者工具

Chrome 开发者工具

Chrome 开发者工具 介绍控制面板时间线下载信息概要请求列表单个请求时间线优化时间线上耗时项 lighthouse 插件Performance&#xff08;性能指标&#xff09;Accessibility&#xff08;可访问性&#xff09;Best Practices&#xff08;最佳实践&#xff09;SEO&#xff08;搜索…
阅读更多...
Luckysheet类似excel的在线表格(vue)

Luckysheet类似excel的在线表格(vue)

参考文档&#xff1a;快速上手 | Luckysheet文档 一、引入 在vue项目的public文件夹下的index.html的<head>标签里面引入 <link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/css/pluginsCss.css /><link relstylesheet hre…
阅读更多...
Dockerfile镜像实战

Dockerfile镜像实战

目录 一 构建SSH镜像 1.开启ip转发功能 2. 准备工作目录 3.修改配置文件 5.启动容器并修改root密码 二 构建Systemctl镜像 1. 准备工作目录 ​编辑2.修改配置文件 3.生成镜像 4.启动容器&#xff0c;并挂载宿主机目录挂载到容器中&#xff0c;进行初始化 5.进入容器 三…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023