HarmonyOS第十章:路由

🎉 博客主页:【剑九_六千里-优快云博客】【剑九_六千里-掘金社区
🎨 上一篇文章:【HarmonyOS第九章:鸿蒙axios(@ohos/axios)
🎠 系列专栏:【HarmonyOS系列
💖 感谢大家点赞👍收藏⭐评论✍

在这里插入图片描述

在这里插入图片描述

1. 跳转与后退 API

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

1.1 router.pushUrl() 路由跳转

  • 路由跳转方法
  • 会添加历史记录
  • 可返回

1.1.1 基本使用方式

创建一个项目:
在这里插入图片描述
选择项目类型:

在这里插入图片描述
设置项目基础内容:

在这里插入图片描述
在项目中创建一个页面:

在这里插入图片描述
查看路由是否已配置:

resources/base/profile/main_pages.json

  • main_pages.json 必须有页面路径,才能实现页面跳转。
  • 通过手动方式创建的 ArkTs File 页面文件,需要在 main_pages.json 文件中进行手动设置。
    在这里插入图片描述

页面中使用 router.pushUrl 进行页面跳转:

导入路由:

import router from '@ohos.router';

使用路由:

Button("跳转到User页面").onClick(() => {
   
   
        // 跳转
        // 会加入历史记录,可返回
        router.pushUrl({
   
   
          url: "pages/User"
        });
      })

完整示例:
在这里插入图片描述

import router from '@ohos.router';

@Entry
@Component
struct Index {
   
   
  @State message: string = 'Hello Index';

  build() {
   
   
    Column() {
   
   
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button("跳转到User页面").onClick(() => {
   
   
        // 跳转
        // 会加入历史记录,可返回
        router.pushUrl({
   
   
          url: "pages/User"
        });
      })
    }
    .height('100%')
    .width('100%')
  }
}

注意:
页面堆栈的容纳极限为32个页面。若页面数量超出此限制,可执行 router.clear() 函数以清除历史页面堆栈,进而释放内存。

1.1.2 传递参数

传参(使用 params 传递):

pages/Index.ets

import router from '@ohos.router';

@Entry
@Component
struct Index {
   
   
  @State message: string = 'Hello Index';

  build() {
   
   
    Column() {
   
   
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button("跳转到User页面").onClick(() => {
   
   
        // 跳转
        // 会加入历史记录,可返回
        router.pushUrl({
   
   
          url: "pages/User",
          params: {
   
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

剑九_六千里

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值