当前位置: 首页 > news >正文

深入解析鸿蒙系统的页面路由(Router)机制

鸿蒙系统以其独特的分布式架构和跨设备的统一体验而备受瞩目。在这个系统中,页面路由(Router)机制是连接应用各页面的关键组成部分。本文将深入探讨鸿蒙系统的页面路由,揭示其工作原理、特点以及在应用开发中的实际应用。

1. 实现

1.1. 两种跳转模式

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

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

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

1.2. 两种实例模式

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

  • Standard:标准实例模式,也是默认情况下的实例模式。每次调用该方法都会新建一个目标页,并压入栈顶。

  • Single:单实例模式。即如果目标页的url在页面栈中已经存在同url页面,则离栈顶最近的同url页面会被移动到栈顶,并重新加载;如果目标页的url在页面栈中不存在同url页面,则按照标准模式跳转。

2. 页面路由的工作原理

鸿蒙系统的页面路由基于一种轻量级的栈式管理结构。每个页面都有一个唯一的标识符,当页面切换时,页面路由根据标识符入栈或出栈,实现页面的切换和管理。

3. 具体实现

3.1. 引入Router模块

import router from '@ohos.router';

3.2. 代码示例

LoginPage.ets


import router from '@ohos.router';
import promptAction from '@ohos.promptAction';@Entry
@Component
struct LoginPage {@State message: string = 'Login Page'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('跳转1').width(100).margin({ top: 10 }).onClick(() => {router.pushUrl({ url: 'pages/HomePage', params: { msg: 'hello world,我是上一个页面传递过来的' } },router.RouterMode.Standard, (err) => {if (err) {promptAction.showToast({ message: `跳转失败:code is ${err.code}, message is ${err.message}` })return;} else {promptAction.showToast({ message: `跳转成功` })}})})Button('跳转2').width(100).margin({ top: 10 }).onClick(() => {router.pushUrl({ url: 'pages/HomePage' },router.RouterMode.Single, (err) => {if (err) {promptAction.showToast({ message: `跳转失败:code is ${err.code}, message is ${err.message}` })return;} else {promptAction.showToast({ message: `跳转成功` })}})})Button('跳转3').width(100).margin({ top: 10 }).onClick(() => {router.replaceUrl({ url: 'pages/HomePage' },router.RouterMode.Single, (err) => {if (err) {promptAction.showToast({ message: `跳转失败:code is ${err.code}, message is ${err.message}` })return;} else {promptAction.showToast({ message: `跳转成功` })}})})}.width('100%')}.height('100%')}
}

HomePage.ets


import router from '@ohos.router';
import promptAction from '@ohos.promptAction';@Entry
@Component
struct HomePage {@State message: string = 'HomePage'@State msg: string = '';onPageShow() {// 获取传递过来的参数对象const params = router.getParams();if (params != null && this.msg != null) {// 获取info属性的值this.msg = params['msg'];} else {this.msg = '没有参数传递过来'}}build() {Row() {Column() {Text(this.msg).fontSize(20)Button('返回上一页').onClick(() => {router.back()})Button('返回指定页面').margin({ top: 10 }).onClick(() => {router.back({url: 'pages/Index'})})Button('页面返回询问框').margin({ top: 10 }).onClick(() => {// 调用router.showAlertBeforeBackPage()方法,设置返回询问框的信息try {router.showAlertBeforeBackPage({message: '您还没有完成支付,确定要返回吗?' // 设置询问框的内容});} catch (err) {console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);}router.back()})Button('页面返回询问框自定义').margin({ top: 10 }).onClick(() => {// 弹出自定义的询问框promptAction.showDialog({message: '您还没有完成支付,确定要返回吗?',buttons: [{text: '取消',color: '#FF0000'},{text: '确认',color: '#0099FF'}]}).then((result) => {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) => {console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);})})}.width('100%')}.height('100%')}
}

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术,这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》:https://qr21.cn/FV7h05

入门必看:https://qr21.cn/FV7h05
1.  应用开发导读(ArkTS)
2.  ……

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门:https://qr21.cn/FV7h05
1.  基本概念
2.  构建第一个ArkTS应用
3.  构建第一个JS应用
4.  ……

开发基础知识:https://qr21.cn/FV7h05
1.  应用基础知识
2.  配置文件
3.  应用数据管理
4.  应用安全管理
5.  应用隐私保护
6.  三方应用调用管控机制
7.  资源分类与访问
8.  学习ArkTS语言
9.  ……

基于ArkTS 开发:https://qr21.cn/FV7h05
1.  Ability开发
2.  UI开发
3.  公共事件与通知
4.  窗口管理
5.  媒体
6.  安全
7.  网络与链接
8.  电话服务
9.  数据管理
10.  后台任务(Background Task)管理
11.  设备管理
12.  设备使用信息统计
13.  DFX
14.  国际化开发
15.  折叠屏系列
16.  ……

http://www.lryc.cn/news/302006.html

相关文章:

  • MCU中断响应流程及注意事项
  • 基于Java SSM框架实现网上报名系统项目【项目源码+论文说明】计算机毕业设计
  • Eclipse - Formatter
  • 算法练习-01背包问题【含递推公式推导】(思路+流程图+代码)
  • Eclipse - Format Comment
  • mqtt 协议的概念和理解
  • 2024年大家都在用的AI写作软件推荐,写作不再是难题
  • CPU是如何工作的?什么是冯·诺依曼架构和哈弗架构?
  • OpenAI视频生成模型Sora的全面解析:从扩散Transformer到ViViT、DiT、NaViT、VideoPoet
  • 【Java】图解 JVM 垃圾回收(一):GC 判断策略、引用类型、垃圾回收算法
  • 做抖店需要注意的几大点,新手最易踩坑,都给你们总结到这了!
  • 小程序API能力汇总——基础容器API(三)
  • 处理目标检测中的类别不均衡问题
  • (03)Hive的相关概念——分区表、分桶表
  • 2024年首发!高级界面控件Kendo UI全新发布2024 Q1
  • stable diffusion webui学习总结(2):技巧汇总
  • java 培训班预定管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目
  • Python内置函数06——join
  • linux安装单机版redis详细步骤,及python连接redis案例
  • ts总结大全
  • 前端登录随机数字字母组合验证
  • 基于Java+SpringBoot+vue+elementui 实现即时通讯管理系统
  • 代码随想录算法训练营第50天(动态规划07 ● 70. 爬楼梯 (进阶) ● 322. 零钱兑换 ● 279.完全平方数
  • 【软考问题】-- 13 - 知识精讲 - 项目绩效域管理
  • VSCode无法连接远程服务器的两种解决方法
  • 【Kuiperinfer】笔记01 项目预览与环境配置
  • 都2024了,你还在使用websocket实现实时消息推送吗?
  • javaScript实现客户端直连华为云OBS实现文件上传、断点续传、断网重传
  • 微信小程序:实现微信小程序应用首页开发 (本地生活首页)
  • 【JavaScript】原型链和继承