【鸿蒙HarmonyOS】深入理解router与Navigation

5. 路由

1.页面路由(router模式）

1.概述

页面路由指的是在应用程序中实现不同页面之间的跳转，以及数据传递。

我们先明确自定义组件和页面的关系：

  • 自定义组件：@Component 装饰的UI单元，
  • 页面：即应用的UI页面。可以由一个或者多个自定义组件组成。
    • @Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry

通过 Router 模块就可以实现这个功能. import { router } from '@kit.ArkUI'

步骤：

  1. 创建页面 -> 页面与组件不同的地方是有且只有一个入口组件（ @Entry修饰），并且在src/main/resources/base/profile/main_pages.json有配置好了页面路径
    1. 口诀：一入口，一配置

  1. router控制页面跳转

  1. 带参数跳转并获取

2.pushUrl 与 replaceUrl

先来看看 pushUrl的情况

  1. 默认打开首页 → 首页入栈
  2. pushUrl 去详情页 → 详情页入栈
  3. back 返回上一页 → 详情页出栈
  4. 此时页面栈中应该只有一个页面

整一个过程中，都可以 router.getLength 进行查看

再来看看replaceUrl的情况

  1. 默认打开首页 → 首页入栈
  2. replaceUrl 去详情页 → 详情页替换首页，首页销毁
  3. back 无法返回 → 没有上一页

跳转到登录页面时可以使用 replaceUrl，因为无需在页面栈中保存其他页面的页面栈信息了。

页面栈相关 api

  // 获取页面栈长度router.getLength()// 获取页面状态let page = router.getState();console.log('页面栈数量:' + page.index);console.log('跳转的路由:' + page.name);console.log('路由路径:' + page.path);// 清空页面栈// router.clear()
3.路由模式

路由提供了两种不同的跳转模式：

  1. standard（标准实例模式）
  2. Single（单实例模式）

不同模式的决定了页面是否会创建多个实例：

  1. Standard：无论之前是否添加过，一直添加到页面栈【默认】
    1. 场景：适用于每次跳转都呈现全新内容或状态的场景，避免数据展示紊乱（数据变化）
  1. Single：如果之前加过页面，会使用之前添加的页面【需要添加参数手动修改】
    1. 场景：适用于那些需要保留页面状态或避免重复创建相同页面的场景（数据不变化）

路由模式语法：

总结

路由跳转的方式有pushUrl和replaceUrl

pushUrl的跳转要考虑两种模式：标准模式，单例模式

  1. pushUrl({}，模式为标准模式（默认的模式）) -> 页面栈中的表现形式

  1. pushUrl({}，模式为单例模式) -> 页面栈中的表现形式

  1. replaceUrl() -> 跳转以后的前一个页面自动销毁了

2.Navigation 路由

概述

组件导航（Navigation）主要用于实现页面间以及组件内部的页面跳转，支持在不同组件间传递跳转参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。本文将从组件导航（Navigation）的显示模式、路由操作、子页面管理、跨包跳转以及跳转动效等几个方面进行详细介绍。

Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

Navigation组件主要包含导航页和子页。导航页由标题栏（包含菜单栏）、内容区和工具栏组成，可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，与子页，以及子页之间可以通过路由操作进行切换。

1.是什么

Navigation是华为HarmonyOS中的一个路由导航组件，主要用于实现页面间的跳转和路由管理。它提供了丰富的功能和灵活的配置选项，支持模块内和跨模块的路由切换。Navigation组件不仅简化了路由切换的逻辑，还提升了应用的导航效率和用户体验。

2. 为什么
  • 1.简化路由管理：Navigation通过组件级的路由能力，简化了页面间的跳转逻辑，使得路由管理更加直观和便捷。
  • 2.支持模块化开发：Navigation支持模块内和跨模块的路由切换，有助于实现模块间的解耦，提升代码的可维护性和可扩展性。
  • 3.丰富的动效支持：Navigation提供了丰富的转场动画和共享元素转场能力，增强了页面切换的视觉效果。
  • 4.生命周期管理：Navigation支持页面生命周期的监听和管理，开发者可以更方便地处理页面的显示和隐藏等状态变化。
  • 5.动态路由：Navigation支持动态路由，允许在运行时动态加载和注册路由，提升了路由管理的灵活性。
3.怎么用

// 1.全局声明一个路径栈
export const pathStack = new NavPathStack()
//路由拦截
pathStack.setInterception({willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",operation: NavigationOperation, animated: boolean) => {if (typeof to === "string") {AlertDialog.show({ message:JSON.stringify('回到了首页',null,2) })return;}// 将跳转到Page1的路由重定向到page2let target: NavDestinationContext = to as NavDestinationContext;AlertDialog.show({ message:JSON.stringify(target,null,2) })if (target.pathInfo.name === 'page1') {// target.pathStack.pop();// target.pathStack.pushPathByName('page2', null);}}
})
import { pathStack } from './utils/pathStack';@Entry
@Component
struct Demo {
param: Record<string, string> = {'name':'zs'};build() {// 2.使用页面栈Navigation(pathStack) {Button('跳转到page1').margin({bottom:10}).onClick(() => {// 页面跳转pathStack.pushPathByName('page1',null)})Button('跳转到page2').onClick(() => {// 页面跳转pathStack.pushPathByName('page2',this.param)})}.title('My Page');}
}


{"routerMap": [{"name": "page1","pageSourceFile": "src/main/ets/pages/page1.ets","buildFunction": "MyPage1","data": {"description": "这是页面1"}},{"name": "page2","pageSourceFile": "src/main/ets/pages/page2.ets","buildFunction": "MyPage2","data": {"description": "这是页面2"}}]
}
import { pathStack } from './utils/pathStack'@Builderfunction MyPage1() {page1()}@Componentstruct page1 {build() {//3.子页面必须要使用 NavDestination 把所有结构都包起来NavDestination() {Column() {Button('回到上一页').onClick(() => {pathStack.pop()})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}.title('page1')}}
import { pathStack } from './utils/pathStack'@Builder
function MyPage2() {page2()
}@Component
struct page2 {@State param: Record<string, string> = {};
aboutToAppear(): void {// AlertDialog.show({ message:JSON.stringify(pathStack.getParamByName('page2'),null,2) })// 获取page2页面的参数this.param = pathStack.getParamByName('page2').pop() as Record<string, string>;}build() {//2.子页面必须要使用 NavDestination 把所有结构都包起来NavDestination() {Column({space:5}) {Text(`你好${this.param?.name}`)Button('回到上一页').onClick(() => {pathStack.pop()})Button('回到首页').onClick(() => {// 返回到根首页（清除栈中所有页面）pathStack.clear()})Button('去往page1').onClick(() => {// 返回到根首页（清除栈中所有页面）pathStack.pushPathByName('page1',null)})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}}
}

 

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

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

相关文章

Apache SeaTunnel：新一代开源、高性能数据集成工具

Apache SeaTunnel：新一代开源、高性能数据集成工具

Apache SeaTunnel 是一款开源、分布式、高性能的数据集成工具&#xff0c;可以通过配置快速搭建数据管道&#xff0c;支持实时海量数据同步。 Apache SeaTunnel 专注于数据集成和数据同步&#xff0c;主要旨在解决数据集成领域的常见问题&#xff1a; 数据源多样性&#xff1a…
阅读更多...
CF-Hero：自动绕过CDN找真实ip地址

CF-Hero：自动绕过CDN找真实ip地址

CF-Hero&#xff1a;自动绕过CDN找真实ip地址 CF-Hero 是一个全面的侦察工具&#xff0c;用于发现受 Cloudflare 保护的 Web 应用程序的真实 IP 地址。它通过各种方法执行多源情报收集。目前仅支持Cloudflare的cdn服务查找真实ip&#xff0c;但从原理上来说查找方法都是通用的…
阅读更多...
React-组件和props

React-组件和props

1、类组件 import React from react; class ClassApp extends React.Component {constructor(props) {super(props);this.state{};}render() {return (<div><h1>这是一个类组件</h1><p>接收父组件传过来的值&#xff1a;{this.props.name}</p>&…
阅读更多...
谈谈接口和抽象类有什么区别？

谈谈接口和抽象类有什么区别？

接口&#xff08;interface&#xff09;和抽象类&#xff08;abstract class&#xff09;都是 Java 中常用的“抽象”工具&#xff0c;用来定义类的规范和结构&#xff0c;但它们有一些本质的区别。下面我用一个简单明了的表格 说明来帮你理解&#xff1a; 对比点抽象类&…
阅读更多...
使用Nacos 打造微服务配置中心

使用Nacos 打造微服务配置中心

一、背景介绍 Nacos 作为服务注册中心的使用方式&#xff0c;同时 Nacos 还可以作为服务配置中心&#xff0c;用于集中式维护各个业务微服务的配置资源。 作为服务配置中心的交互流程图如下。 这样设计的目的&#xff0c;有一个明显的好处就是&#xff1a;有利于对各个微服务…
阅读更多...
OpenCv高阶（十一）——物体跟踪

OpenCv高阶（十一）——物体跟踪

文章目录 前言一、OpenCV 中的物体跟踪算法1、均值漂移&#xff08;Mean Shift&#xff09;&#xff1a;2、CamShift&#xff1a;3、KCF&#xff08;Kernelized Correlation Filters&#xff09;&#xff1a;4、MIL&#xff08;Multiple Instance Learning&#xff09;&#xf…
阅读更多...
声音分离人声和配乐base，vocals，drums -从头设计数字生命第6课， demucs——仙盟创梦IDE

声音分离人声和配乐base，vocals，drums -从头设计数字生命第6课， demucs——仙盟创梦IDE

demucs -n htdemucs --two-stemsvocals 未来之窗.mp3 demucs -n htdemucs --shifts5 之.mp3demucs -n htdemucs --shifts5 -o wlzcoutspl 未来之窗.mp3 伴奏提取人声分离技术具有多方面的重大意义&#xff0c;主要体现在以下几个领域&#xff1a; 音乐创作与制作 创作便利…
阅读更多...
使用若依二次开发商城系统-4：商品属性

使用若依二次开发商城系统-4：商品属性

功能3&#xff1a;商品分类 功能2&#xff1a;商品品牌 功能1&#xff1a;搭建若依运行环境前言 商品属性功能类似若依自带的字典管理&#xff0c;分两步&#xff0c;先设置属性名&#xff0c;再设置对应的属性值。 一.操作步骤 1&#xff09;数据库表product_property和pro…
阅读更多...
操作指南：vLLM 部署开源大语言模型（LLM）

操作指南：vLLM 部署开源大语言模型（LLM）

vLLM 是一个专为高效部署大语言模型&#xff08;LLM&#xff09;设计的开源推理框架&#xff0c;其核心优势在于显存优化、高吞吐量及云原生支持。 vLLM 部署开源大模型的详细步骤及优化策略&#xff1a; 一、环境准备与安装 安装 vLLM 基础安装&#xff1a;通过 pip 直接安装…
阅读更多...
32.768kHz晶振详解：作用、特性及与其他晶振的区别

32.768kHz晶振详解：作用、特性及与其他晶振的区别

一、32.768kHz晶振的核心作用 实时时钟&#xff08;RTC&#xff09;驱动&#xff1a; 提供精确的1Hz时钟信号&#xff0c;用于计时功能&#xff08;如电子表、计算机CMOS时钟&#xff09;。 分频公式&#xff1a; 1Hz 32.768kHz / 2^15&#xff08;通过15级二分频实现&#x…
阅读更多...
第3讲、大模型如何理解和表示单词：词嵌入向量原理详解

第3讲、大模型如何理解和表示单词：词嵌入向量原理详解

1. 引言 大型语言模型&#xff08;Large Language Models&#xff0c;简称LLM&#xff09;如GPT-4、Claude和LLaMA等近年来取得了突破性进展&#xff0c;能够生成流畅自然的文本、回答复杂问题、甚至编写代码。但这些模型究竟是如何理解人类语言的&#xff1f;它们如何表示和处…
阅读更多...
【Java面试笔记：进阶】19.Java并发包提供了哪些并发工具类？

【Java面试笔记：进阶】19.Java并发包提供了哪些并发工具类？

Java 并发包（java.util.concurrent）提供了一系列强大的工具类，用于简化多线程编程、提升并发性能并确保线程安全。 1. Java 并发包的核心内容 并发包概述：java.util.concurrent 包及其子包提供了丰富的并发工具类，用于简化多线程编程。主要组成部分： 高级同步结构：如 C…
阅读更多...
Matlab数字信号处理——小波阈值法去噪分析系统

Matlab数字信号处理——小波阈值法去噪分析系统

&#x1f527; 系统简介 本系统通过 MATLAB GUI 图形界面&#xff0c;集成了 小波阈值去噪算法 的各个核心模块&#xff0c;可以实现以下功能&#xff1a; 打开语音文件&#xff1a;支持常见音频格式读取&#xff1b; 模拟加噪&#xff1a;系统内置白噪声模拟功能&#xff0…
阅读更多...
EDI 如何与 ERP,CRM,WMS等系统集成

EDI 如何与 ERP,CRM,WMS等系统集成

在数字化浪潮下&#xff0c;与制造供应链相关产业正加速向智能化供应链转型。传统人工处理订单、库存和物流的方式已难以满足下单客户对响应速度和数据准确性的严苛要求。EDI技术作为企业间数据交换的核心枢纽&#xff0c;其与ERP、CRM、WMS等业务系统的深度集成&#xff0c;成…
阅读更多...
计算机组成原理-408考点-数的表示

计算机组成原理-408考点-数的表示

常见题型&#xff1a;C语言中的有符号数和无符号数的表示。 【例】有如下C语言程序段: short si-32767&#xff1b;unsigned short usisi&#xff1b;执行上述两条语句后&#xff0c;usi的值为___。short和unsigned short均使用16位二进制数表示。 【分析】考点&#xff1a;同…
阅读更多...
企业级AI开发利器：Spring AI框架深度解析与实战

企业级AI开发利器：Spring AI框架深度解析与实战

企业级AI开发利器&#xff1a;Spring AI框架深度解析与实战 一、前言&#xff1a;Java生态的AI新纪元 在人工智能技术爆发式发展的今天&#xff0c;Java开发者面临着一个新的挑战&#xff1a;如何将大语言模型&#xff08;LLMs&#xff09;和生成式AI&#xff08;GenAI&#…
阅读更多...
【金仓数据库征文】——选择金仓，选择胜利

【金仓数据库征文】——选择金仓，选择胜利

目录 第一部分&#xff1a;金仓数据库——开创数据库技术的新时代 1.1 金仓数据库的技术底蕴 1.2 高可用架构与灾备能力 1.3 分布式架构与弹性扩展能力 第二部分&#xff1a;金仓数据库助力行业数字化转型 2.1 电信行业&#xff1a;核心系统国产化替代 2.2 医疗行业&…
阅读更多...
用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。

用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。

一、思路概要和知识回顾 1.思路概要 ①中缀表达式计算&#xff1a; 需要处理运算符的优先级&#xff0c;可能需要用到栈结构。 ❗❗如何将中缀表达式转换为后缀表达式&#xff1f;或者直接计算&#xff1f; 通常&#xff0c;中缀转后缀&#xff08;逆波兰式&#xff09;再…
阅读更多...
Langchain_Agent+数据库

Langchain_Agent+数据库

本处使用Agent数据库&#xff0c;可以直接执行SQL语句。可以多次循环查询问题 前文通过chain去联系数据库并进行操作&#xff1b; 通过链的不断内嵌组合&#xff0c;生成SQL在执行SQL再返回。 初始化 import os from operator import itemgetterimport bs4 from langchain.ch…
阅读更多...
Python 爬虫如何伪装 Referer？从随机生成到动态匹配

Python 爬虫如何伪装 Referer？从随机生成到动态匹配

一、Referer 的作用与重要性 Referer 是 HTTP 请求头中的一个字段&#xff0c;用于标识请求的来源页面。它在网站的正常运行中扮演着重要角色&#xff0c;例如用于统计流量来源、防止恶意链接等。然而&#xff0c;对于爬虫来说&#xff0c;Referer 也可能成为被识别为爬虫的关…
阅读更多...
最新文章

Copyright @ 2022~2023