鸿蒙NEXT开发-页面路由(基于最新api12稳定版)

注意:博主有个鸿蒙专栏,里面从上到下有关于鸿蒙next的教学文档,大家感兴趣可以学习下

如果大家觉得博主文章写的好的话,可以点下关注,博主会一直更新鸿蒙next相关知识

专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html

目录

[1. 基本介绍](#1. 基本介绍)

[2. 新建页面](#2. 新建页面)

[2.1 第一种方式](#2.1 第一种方式)

[2.2 第二种方式](#2.2 第二种方式)

[3. 页面的跳转和后退](#3. 页面的跳转和后退)

[4. 页面栈](#4. 页面栈)

[5. 路由模式](#5. 路由模式)

[6. 路由传参](#6. 路由传参)

[7. 学习地址](#7. 学习地址)

1. 基本介绍

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

路由这块知识点包括:

1、创建页面

2、页面跳转和后退

3、页面栈

4、路由模式

5、跳转传参

2. 新建页面

router的使用都是基于Entry修饰的组件

都是基于resources/base/profile/main-page.json中的路由配置来跳转的

2.1 第一种方式

无需手动去resources/base/profile/main-page.json中的路由配置,工具自动给我们生成

2.2 第二种方式

需要手动去resources/base/profile/main-page.json中的路由配置

复制代码
@Entry
@Component
struct Detail {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
  }
}

3. 页面的跳转和后退

其中pushUrl会在当前页面层级再加一层页面,不管是不是同一个页面,

A -> B 相当于当前页面栈中存在两个页面 A和B

鸿蒙系统最多页面栈为32

4. 页面栈

页面栈是用来存储程序运行时页面的一种数据结构,遵循先进后出的原则

页面栈的最大容量是32个页面

压栈

router.pushUrl()

获取页面栈的长度

router.getLength()

清空页面栈

router.clear()

5. 路由模式

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

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

2、Single:如果目标页面已存在,会将已有的最近同url页面移到栈顶(看情况使用)

复制代码
Button('点我').onClick(() => {
  router.pushUrl({
    url: 'pages/Edit'
  },router.RouterMode.Standard)
})

6. 路由传参

复制代码
Button('点我').onClick(() => {
  router.pushUrl({
    url: 'pages/Edit',
    params:{
      name:'东林'
    }
  },router.RouterMode.Standard)
})

aboutToAppear(): void {
  console.log(JSON.stringify(router.getParams()))
}

7. 学习地址

全网首发鸿蒙NEXT星河版零基础入门到实战,2024年最新版,企业级开发!视频陆续更新中!_哔哩哔哩_bilibili

相关推荐
马剑威(威哥爱编程)11 分钟前
【共创稿事节】HarmonyOS 7 视觉 AI 进阶实战:人脸检测 + 通用文字识别(OCR)两步接入
华为·harmonyos·arkts
HMS Core13 小时前
HarmonyOS智慧多窗,让应用在任意窗口都“恰到好处”
harmonyos
梦想不只是梦与想13 小时前
鸿蒙 应用发布准备工作(一)
harmonyos·鸿蒙上架·鸿蒙应用发布
马剑威(威哥爱编程)15 小时前
【共创稿事节】HarmonyOS 7 文搜图实战:自然语言检索本地图片,全流程端侧闭环
华为·harmonyos
李游Leo15 小时前
HarmonyOS 7 HAR + HSP 工程化实战:模块复用、包体积控制与依赖边界
harmonyos
昇腾知识体系16 小时前
鲲鹏+昇腾 NUMA 亲和性调优:Kunpeng 920 双路服务器给 NPU 工作负载绑核
人工智能·华为·知识图谱
用户5930960097817 小时前
Flutter 鸿蒙化实战:r_upgrade 适配 OpenHarmony,应用升级检查与弹窗
harmonyos
youyin17 小时前
HarmonyOS 鸿蒙 ArkTS/ArkUI 装饰器大全
华为·harmonyos
轻口味18 小时前
HarmonyOS 7 新特性1:闪控窗——轻规划里的专注倒计时,跟着你走出应用
harmonyos·鸿蒙·移动端·闪控窗
用户5930960097818 小时前
Flutter 鸿蒙化实战:record_mp3 适配 OpenHarmony,边录音边出 MP3
harmonyos