鸿蒙 HarmonyOS Next 路由 不废话 全干货

news2024/11/25 23:18:58

一、页面的创建

(1)直接通过创建一个新的Page的方式创建

(2)先创建一个 ArkTs File文件,然后在resources/base/profile/main_pages.json中加上页面对应的src路径,下面的Index_3.ets文件是通过创建ArkTs File文件生成的,需要加上src路径

加上路径后的显示:

 

二、路由 - 操作

首先导入:

import router from 'ohos.router'

普通跳转(可以返回)

相当于栈,可以每次跳转都是入栈,每次返回都是出栈,页面栈的最大容量是32个页面

提示:页面地址是resources/base/profile/main_pages.json里的src地址

router.pushUrl({
        url:'页面地址'
})

替换跳转(无法返回)

提示:页面地址是resources/base/profile/main_pages.json里的src地址

router.replaceUrl({
        url:'页面地址'
})

返回

router.back()

获取页面栈的长度

router.getLength()

清空页面栈 

router.clear()

三、路由模式

两种路由模式:

Standard:无论之前是否使用过,一直添加到页面栈中(默认)

Single:如果目标页面已存在,会将已有的最近同url页面移到栈顶

路由模式的设置方式

在挑战页面的第二个参数设置路由模式

router.pushUrl(options,mode)

示例:

router.pushUrl({
  url:'pages/Index_2'
},router.RouterMode.Single)

四、路由传参

传递参数的示例:

router.pushUrl({
  url:'pages/Index_3',
  params: {
    username:this.username
  }
})

接受参数的示例:

aboutToAppear():void{

  console.log(JSON.stringify(router.getParams()))
  const params = router.getParams() as 类型

  //例如,获取params中的username属性
  console.log('我的用户名是'+params.username)

}

五、demo演示

第一个页面:Index.ets (效果:跳转的到Index_2.ets页面)

import router from '@ohos.router'

@Entry
@Component
struct Index {

  build(){
    Column() {
      Text('第一个页面')
        .fontSize(50)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/Index_2'
          },router.RouterMode.Single)
        })

    }
  }
}

第二个页面:Index_2.ets(效果:跳转的到Index_3.ets页面,同时传递参数username)

import router from '@ohos.router';

@Entry
@Component
struct Index_2 {
  @State username:string = 'csh'
  build(){
    Column() {
      Text('第二个页面')
        .fontSize(50)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/Index_3',
            params: {
              username:this.username
            }
          })
        })
    }
  }
}

第三页面:Index_3.ets(效果:接收Index_2.ets页面传递来的参数并通过日志输出)

import router from '@ohos.router';

interface ParamsObj{
  username:string
}

@Entry
@Component
struct Index_3 {

  aboutToAppear():void{

    console.log(JSON.stringify(router.getParams()))
    const params = router.getParams() as ParamsObj
    console.log('我的用户名是'+params.username)

  }

  build(){
    Column() {
      Text('第三个页面')
        .fontSize(50)

    }
  }
}

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

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

相关文章

创建本地仓库

一、新建挂载目录 二、将挂载本地镜像挂载到目录 三、配置yum仓库 一、新建挂载目录 mkdir /BenDiCangKu 二、将挂载本地镜像挂载到目录 1、先连接本地光盘 2、挂载光盘 mount /dev/sr0 /BenDiCangKu 3、查看挂载 由此可见挂载成功 三、配置yum仓库 1、新建yum仓库文件…

LeetCode 196, 73, 105

目录 196. 删除重复的电子邮箱题目链接表要求知识点思路代码 73. 矩阵置零题目链接标签简单版思路代码 优化版思路代码 105. 从前序与中序遍历序列构造二叉树题目链接标签思路代码 196. 删除重复的电子邮箱 题目链接 196. 删除重复的电子邮箱 表 表Person的字段为id和email…

图像处理中的二维傅里叶变换

图像处理中的二维傅里叶变换 问题来源是对彩色图像进行压缩时得出的傅里叶系数的图像如何解释,导入图片,转化为灰度图片: #彩色图片一般是由RGB组成,其实就是3个二维数组叠加而成,当RGB时,彩色图片就会变成…

基于springboot的工作绩效管理系统的设计与实现+文档

💗博主介绍💗:✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示:文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

1117 数字之王

solution 判断现有数字是否全为个位数 全为个位数,找出出现次数最多的数字,并首行输出最多出现次数,第二行输出所有出现该次数的数值不全为个位数 若当前位数值为0,无需处理若当前位数值非0,则每位立方相乘&#xff0…

VBA语言専攻T3学员领取资料通知0706

T3学员领取资料通知0706 各位学员∶本周MF系列VBA技术资料增加641-645讲,T3学员看到通知后请免费领取,领取时间7月5日晚上19:00-7月6日晚上19:00。本次增加内容: MF641:前个窗体组合框选项联动下个组合框 MF642:工作表中数据选项联动下个数据验证 MF…

数据库-MySQL 实战项目——书店图书进销存管理系统数据库设计与实现(附源码)

一、前言 该项目非常适合MySQL入门学习的小伙伴,博主提供了源码、数据和一些查询语句,供大家学习和参考,代码和表设计有什么不恰当还请各位大佬多多指点。 所需环境 MySQL可视化工具:navicat; 数据库:MySq…

FlowUs设计师展示自己作品集的优质平台

作为一位资深设计师,我认为在多个渠道展示我们的作品是至关重要的。这不仅仅是为了展示我们的设计能力,更是为了建立我们作为创意专业人士的声誉和品牌。以下是一些我们应当考虑的理由: 专业展示:在多个平台上展示作品集&#xff…

一文带你了解“商贸物流大脑”

商贸物流大脑源于实体物流,物理世界的实体物流是构建商贸物流大脑的基础。商贸物流大脑应该是物理世界的实际物流系统和相应的虚拟物流系统两个层面血肉相连、相互作用、有机统一的整体。商贸物流的研究内容包括数字产业化和物流数字化两大部分。信息产业化是进入物…

OpenCV 灰度直方图及熵的计算

目录 一、概述 1.1灰度直方图 1.1.1灰度直方图的原理 1.1.2灰度直方图的应用 1.1.3直方图的评判标准 1.2熵 二、代码实现 三、实现效果 3.1直方图显示 3.2 熵的计算 一、概述 OpenCV中的灰度直方图是一个关键的工具,用于分析和理解图像的灰度分布情况。直…

electron教程(二)控制应用程序的事件生命周期

1.will-finish-launching 当应用程序完成基础的启动的时候被触发,在 Windows 和 Linux 中, will-finish-launching 事件与 ready 事件是相同的; 在 macOS 中,这个事件相当于 NSApplication 中的 applicationWillFinishLaunching 提示。 app.on(will-fi…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【生成密钥(C/C++)】

生成密钥(C/C) 以生成ECC密钥为例,生成随机密钥。具体的场景介绍及支持的算法规格。 注意: 密钥别名中禁止包含个人数据等敏感信息。 开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复…

教师商调函流程详解

作为一名教师,您是否曾面临过工作调动的困惑?当您决定迈向新的教育环境,是否清楚整个商调函流程的每一个细节?今天,就让我们一起来探讨这一过程,确保您能够顺利地完成工作调动。 首先需要确定新调入的学校已…

如何摆脱反爬虫机制?

在网站设计时,为了保证服务器的稳定运行,防止非法数据访问,通常会引入反爬虫机制。一般来说,网站的反爬虫机制包括以下几种: 1. CAPTCHA:网站可能会向用户显示CAPTCHA,要求他们在访问网站或执行…

在Ubuntu上配置PPPoE服务:从安装到自动化启动的全指南

在Ubuntu上配置PPPoE服务:从安装到自动化启动的全指南 PPPoE(点对点协议以太网)是一种广泛用于DSL和光纤宽带连接的协议。在本篇技术博客中,我们将详细介绍如何在Ubuntu系统上配置PPPoE服务,包括安装、配置、启动以及…

《简历宝典》02 - 如果你是HR,你会优先打开哪份简历?

现在的求职环境不必多说,其实我们大家都还是很清楚的。所以,在这个环境下,写一份优秀的简历,目的与作用也不必多说。那么,这一小节呢,我们先从简历这份文档的文档名开始说起。 目录 1 你觉得HR们刷简历的时…

沙龙回顾|MongoDB如何充当企业开发加速器?

数据不仅是企业发展转型的驱动力,也是开发者最棘手的问题。前日,MongoDB携手阿里云、NineData在杭州成功举办了“数据驱动,敏捷前行——MongoDB企业开发加速器”技术沙龙。此次活动吸引了来自各行各业的专业人员,共同探讨MongoDB的…

娱乐圈惊爆已婚男星刘端端深夜幽会

【娱乐圈惊爆!已婚男星刘端端深夜幽会,竟是《庆余年》二皇子“戏外风云”】在这个信息爆炸的时代,娱乐圈的每一次风吹草动都能瞬间点燃公众的热情。今日,知名娱乐博主刘大锤的一则预告如同投入湖中的巨石,激起了层层涟…

香橙派AIpro测评:yolo8+usb鱼眼摄像头的Camera图像获取及识别

一、前言 近期收到了一块受到业界人士关注的开发板"香橙派AIpro",因为这块板子具有极高的性价比,同时还可以兼容ubuntu、安卓等多种操作系统,今天博主便要在一块832g的香橙派AI香橙派AIpro进行YoloV8s算法的部署并使用一个外接的鱼眼USB摄像头…

护航端侧大模型平稳健康发展,百度大模型内容安全Lite版正式发布

6月28日,WAVE SUMMIT深度学习开发者大会 2024 “智变应用、码动产业”平行论坛在北京召开。与会,百度大模型内容安全Lite版正式发布,可面向低算力和超低算力的终端大模型提供离线场景下的一站式安全解决方案,为各类终端大模型平稳…