玩转鸿蒙NXET之组件导航与路由跳转二

页面路由（@ohos.router）

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从页面跳转、页面返回、页面返回前增加一个询问框和命名路由几个方面介绍Router模块提供的功能。

页面跳转与参数接收

页面跳转

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

方法router.pushUrl()router.replaceUrl()
用途用于添加新页面到页面栈，保留原有页面。用于替换当前页面，将目标页面URL替代为当前页面URL。
参数接受目标页面URL和导航模式参数。接受目标页面URL和导航模式参数。
页面栈变化如果目标页面的URL已存在于页面栈中，会增加页面栈的元素数量。如果目标页面的URL已存在于页面栈中，会减少页面栈的元素数量。
行为创建新页面并添加到页面栈，保留原有页面。移动现有页面到栈顶，替换当前页面，销毁被替换的当前页面。
导航模式通常支持 “Single” 和 “Standard” 模式。通常支持 “Single” 和 “Standard” 模式。
使用场景用于常规页面切换，保留原有页面状态。用于特殊场景，如页面替换和销毁。
特征router.pushUrl()router.replaceUrl()
导航模式通常支持 “Single” 和 “Standard” 模式。通常支持 “Single” 和 “Standard” 模式。
“Single” 行为- 如果目标页面的URL已存在于页面栈中，会增加页面栈的元素数量。
- 最近的相同URL页面会被移动到栈顶，成为新建页。
- 原来的页面仍然存在于栈中，页面栈的元素数量不变。		- 如果目标页面的URL已存在于页面栈中，会减少页面栈的元素数量。
- 移动现有页面到栈顶，替换当前页面，销毁被替换的当前页面。
“Standard” 行为- 无论目标页面的URL在页面栈中是否存在相同的URL页面，会按照多实例模式进行导航。
- 页面栈的元素数量保持不变。		- 无论目标页面的URL在页面栈中是否存在相同的URL页面，会按照多实例模式进行导航。
- 页面栈的元素数量保持不变。
router.pushUrl({url: 'pages/Second',params: {src: 'Index页面传来的数据',}
}, router.RouterMode.Single)router.replaceUrl({url: 'pages/Second',params: {src: 'Index页面传来的数据',}
}, router.RouterMode.Single)

参数接收

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

import router from '@ohos.router';@Entry
@Component
struct Second {@State src: string = router.getParams()?.['src'];// 页面刷新展示...
}

页面返回

页面返回

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

在Second页面中，可以通过调用router.back()方法实现返回到上一个页面，或者在调用router.back()方法时增加可选的options参数（增加url参数）返回到指定页面，也可以返回命名路由页面。

import router from '@ohos.router';
// 返回上级
router.back();
// 返回制定页面
router.back({ url: 'pages/Index' });
// myPage为返回的命名路由页面别名
router.back({url: 'myPage' 
});

页面返回询问对话框

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

  • 启用页面返回询问对话框功能：

    使用 router.enableBackPageAlert() 方法开启页面返回询问对话框功能。这个功能只针对当前页面生效。在调用 router.pushUrl() 或 router.replaceUrl() 方法后，跳转到的新页面被视为新建页面，因此在页面返回之前需要先调用 router.enableBackPageAlert() 方法，以启用页面返回询问对话框功能。

    router.enableBackPageAlert({message: 'Message Info'
});router.back();

  • 关闭页面返回询问对话框功能：

    如果需要关闭页面返回询问对话框功能，可以使用 router.disableAlertBeforeBackPage() 方法。这个方法用于在特定情况下禁用询问对话框，以确保在页面返回时不会出现确认提示。

  • 自定义询问框

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

    import router from '@ohos.router';
import promptAction from '@ohos.promptAction';
import { BusinessError } from '@ohos.base';function onBackClick() {// 弹出自定义的询问框promptAction.showDialog({message: '您还没有完成支付，确定要返回吗？',buttons: [{text: '取消',color: '#FF0000'},{text: '确认',color: '#0099FF'}]}).then((result:promptAction.ShowDialogSuccessResponse) => {if (result.index === 0) {// 用户点击了“取消”按钮console.info('User canceled the operation.');} else if (result.index === 1) {// 用户点击了“确认”按钮console.info('User confirmed the operation.');// 调用router.back()方法，返回上一个页面router.back();}}).catch((err:Error) => {let message = (err as BusinessError).messagelet code = (err as BusinessError).codeconsole.error(`Invoke showDialog failed, code is ${code}, message is ${message}`);})
}

参数接收

在Second页面中，调用router.back()方法返回上一个页面或者返回指定页面时，根据需要继续增加自定义参数，例如在返回时增加一个自定义参数src。

router.back({url: 'pages/Index',params: {src: 'Second页面传来的数据',}
})

从Second页面返回到Index页面。在Index页面通过调用router.getParams()方法，获取Second页面传递过来的自定义参数。

在调用 router.back() 方法时，不会新建页面，而是返回到原来的页面。在原来页面中使用 @State 声明的变量不会重复声明，也不会触发页面的 aboutToAppear() 生命周期回调。因此，不能直接在变量声明以及页面的 aboutToAppear() 生命周期回调中接收和解析 router.back() 传递过来的自定义参数。

这意味着当使用 router.back() 返回到前一个页面时，需要采取其他方式来传递和处理自定义参数，因为原页面的状态和生命周期不会重新初始化。

可以放在业务需要的位置进行参数解析。示例代码在Index页面中的onPageShow()生命周期回调中进行参数的解析。

import router from '@ohos.router';@Entry
@Component
struct Index {@State src: string = '';onPageShow() {this.src = router.getParams()?.['src'];}// 页面刷新展示...
}

命名路由

在开发中为了跳转到共享包Har或者Hsp中的页面（即共享包中路由跳转），可以使用router.pushNamedRoute()来实现。

  • 在想要跳转到的共享包Har或者Hsp页面里，给@Entry修饰的自定义组件命名：

    // library/src/main/ets/pages/Index.ets
// library为新建共享包自定义的名字
@Entry({ routeName: 'myPage' })
@Component
export struct MyComponent {build() {Row() {Column() {Text('Library Page').fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

  • 配置成功后需要在跳转的页面中引入命名路由的页面：

    import router from '@ohos.router';
import { BusinessError } from '@ohos.base';
import('@ohos/library/src/main/ets/pages/Index');  // 引入共享包中的命名路由页面
@Entry
@Component
struct Index {build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('Hello World').fontSize(50).fontWeight(FontWeight.Bold).margin({ top: 20 }).backgroundColor('#ccc').onClick(() => { // 点击跳转到其他共享包中的页面try {router.pushNamedRoute({name: 'myPage',params: {data1: 'message',data2: {data3: [123, 456, 789]}}})} catch (err) {let message = (err as BusinessError).messagelet code = (err as BusinessError).codeconsole.error(`pushNamedRoute failed, code is ${code}, message is ${message}`);}})}.width('100%').height('100%')}
}

  • 在当前应用包的oh-package.json5文件中配置依赖。

"dependencies": {"@ohos/library": "file:../library",...
}

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

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

相关文章

MongoDB自学笔记（一）

MongoDB自学笔记（一）

一、MongoDB简介 MongoDB是一款基于C开发的文档型数据库。与传统的关系型数据库有所不同，MongoDB面向的是文档，所谓的文档是一种名为BSON （Binary JSON：二进制JSON格式）是非关系数据库当中功能最丰富，最像…
阅读更多...
AV1 编码标准帧间预测技术概述

AV1 编码标准帧间预测技术概述

AV1 编码标准帧间预测 AV1（AOMedia Video1）是一种开源的视频编码格式，它在帧间预测技术上做出了显著的改进和扩展，以提供比现有标准更高的压缩效率和更好的视频质量。以下是AV1帧间预测技术的几个关键点： 参考帧扩展&a…
阅读更多...
You are running Vue in development mode.和undefined is not iterable白屏问题

You are running Vue in development mode.和undefined is not iterable白屏问题

遇到的报错信息如下， 你正在开发模式下运行 Vue。 确保在部署生产环境时打开生产模式 但是我是关闭了的Vue.config.productionTip false 最后发现是服务器问题
阅读更多...
数据库作业6

数据库作业6

视图作业 1. 创建视图v_emp_dept_id_1 CREATE VIEW v_emp_dept_id_1 AS SELECT emp_name, address FROM emp WHERE dept_id (SELECT dept_id FROM dept WHERE dept_name 销售部); 2. 创建视图v_emp_dept CREATE VIEW v_emp_dept AS SELECT e.emp_name, e.address, d.d…
阅读更多...
AI艺术革命：使用神经网络生成创新艺术作品

AI艺术革命：使用神经网络生成创新艺术作品

如何使用神经网络生成艺术作品 1. 简介 神经网络，特别是卷积神经网络（CNN）和生成对抗网络（GAN），在生成艺术作品方面表现出色。本教程将介绍如何使用这些神经网络生成艺术作品。 2. 基础概念 2.1 卷积神…
阅读更多...
Ubuntu安装 Nginx

Ubuntu安装 Nginx

前置条件： 把apt包更新到最新（如果更新过就跳过这步） 先检查 sudo apt update 后更新 sudo apt upgrade （期间要选择确认，输入 y 即可） 如果不行可以：sudo apt upgrade --fix-missing 先卸…
阅读更多...
buttonrpc解析—server篇

buttonrpc解析—server篇

文章目录 前言serveras_serverbindcallproxycallproxy_ runcall_ 总结参考 前言 关于buttonrpc.hpp的解析 server 我们从server.cpp的main函数部分来学习这个hpp文件 int main() {buttonrpc server; server.as_server(5555);//server.bind("redis_command", redis…
阅读更多...
IIS的安装及Web服务器深度配置：打造高效稳定的网络门户

IIS的安装及Web服务器深度配置：打造高效稳定的网络门户

在构建现代网络环境的过程中，IIS（Internet Information Services）作为微软提供的强大Web服务器软件，扮演着至关重要的角色。无论是企业级的网站部署，还是个人开发者的小型项目测试，IIS都能提供稳定、高效的…
阅读更多...
无人机使能的边缘计算优化问题

无人机使能的边缘计算优化问题

Joint Deployment and Task Scheduling Optimization for Large-Scale Mobile Users in Multi-UAV-Enabled Mobile Edge Computing论文阅读笔记 BackgroundContributionsSystem Model and Problem FormulationLocal Execution ModelMEC Execution ModelUAV Hover Model Propose…
阅读更多...
kubernetes概念及基本介绍（一）

kubernetes概念及基本介绍（一）

部署方式的演进过程 传统部署 直接将应用程序部署在物理机器上，很难合理分配计算机资源，而且程序之间会产生影响 虚拟化部署 可以在一台物理机上运行多个虚拟机，没个虚拟机都是独立的一个环境，程序环境不会产生影响，…
阅读更多...
SHRM已开始报名,常见问题答疑来了

SHRM已开始报名,常见问题答疑来了

2024年SHRM（美国人力资源管理认证）的第二个考试报名窗口，即国内最后一次SHRM中文考试窗口，已于北美时间2024年6月3日00:00开放报名。 此次SHRM中文考试报名窗口的开启，对于国内众多渴望提升自我、拓宽职业发展道路的H…
阅读更多...
React中使用usePrevious的意义是什么，为啥要用它

React中使用usePrevious的意义是什么，为啥要用它

usePrevious钩子 export function usePrevious<T>(value: T): T | undefined {const ref useRef<T>();useEffect(() > {ref.current value;}, [value]);return ref.current; }注&#xff1a;更多好用的性能钩子网站推荐&#xff1a;https://react-hooks-libr…
阅读更多...
【Linux】权限管理与相关指令

【Linux】权限管理与相关指令

文章目录 1.权限、文件权限、用户文件权限的理解以及对应八进制数值表示、设置目录为粘滞位文件类型 2.权限相关的常用指令susudochmodchownchgrpumaskwhoamifile 1.权限、文件权限、用户 通过一定条件&#xff0c;拦住一部分人&#xff0c;给另一部分权利来访问资源&#xff0…
阅读更多...
vue3源码（七）渲染原理-h()

vue3源码（七）渲染原理-h()

1.定义 h函数是创建节点, 可实现展示template如何渲染到html中的过程&#xff0c;因为vue渲染到页面上是通过loader打包成模板字符串拼接渲染的&#xff0c;所以 h 函数同样也是通过字符串渲染到html中 h函数就是vue中的createElement方法&#xff0c;这个函数作用就是创建虚…
阅读更多...
Python编程学习第一篇——Python零基础快速入门（六）（2）

Python编程学习第一篇——Python零基础快速入门（六）（2）

上节讲了运算符，这节开始讲解Python的语法结构。前面一些章节我们对Python基础知识已经有了一些了解，包括Python数据类型、变量、语句、注释等等，也分享了一些可以运行小程序（小游戏），让大家在其中体会变量、语句、注释和数据类型等的运用。其中也涉及了一些语法结构，有…
阅读更多...
PreparedStatement can have at most 65535 parameters

PreparedStatement can have at most 65535 parameters

在 JDBC 中&#xff0c;由于内部实现的限制&#xff0c;PreparedStatement 能够接受的参数个数不能超过 65535 个 原因&#xff1a; PreparedStatement可以包含最多65,535个参数&#xff0c;‌这是因为PreparedStatement接口设计时&#xff0c;‌为了支持大量的参数化查询&am…
阅读更多...
Windows 2012安装之实现远程连接

Windows 2012安装之实现远程连接

新建虚拟机 点击稍后安装操作系统 点击Microsoft Windows(W) 选择Windows Server 2012 设置虚拟机名称、安装位置 选择你的电脑核数 点击编辑虚拟机设置 点击CD/DVD(SATA) 使用ISO映像文件(M) 配置完之后点击确定 然后开启虚拟机 下一步&#xff1a; 点击现在安装&#xff1a…
阅读更多...
【学习笔记】无人机（UAV）在3GPP系统中的增强支持(十二)-无人机群在物流中的应用

【学习笔记】无人机（UAV）在3GPP系统中的增强支持(十二)-无人机群在物流中的应用

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…
阅读更多...
常用的点云预处理算法

常用的点云预处理算法

点云预处理是处理点云数据时的重要部分&#xff0c;其目的是提高点云数据的质量和处理效率。通过去除离群点、减少点云密度和增强特征&#xff0c;可以消除噪声、减少计算量、提高算法的准确性和鲁棒性&#xff0c;从而为后续的点云处理和分析步骤&#xff08;如配准、分割和重…
阅读更多...
【Git】执行git clone / checkout 命令出现 git Filename too long

【Git】执行git clone / checkout 命令出现 git Filename too long

执行 git clone / checkout 命令出现错误 git Filename too long 原因是因为目录中个别文件的文件名长度太长&#xff0c;超过了win文件名限制的260长度 解决方案 全局配置git git config --system core.longpaths true查看 git config --get core.longpaths设置完成后即可c…
阅读更多...
最新文章

Copyright @ 2022~2023