自学鸿蒙HarmonyOS的ArkTS语言<三>路由跳转及传参

【官方文档传送门】

一、导入模块
java 复制代码
import router from '@ohos.router'
二、新增页面配置
三、常用api

1、跳转到应用内的指定页面

java 复制代码
build() {
    Row() {
      Button('下一页')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Index2',
              params: {
                name: 'test'
              }
            })
          })
    }
    .height('100%')
  }

2、用应用内的某个页面替换当前页面,并销毁被替换的页面

router.replaceUrl({ url, params: {...} })

java 复制代码
build() {
    Row() {
      Button('下一页')
        .onClick(() => {
          router.replaceUrl({
            url: 'pages/Index2',
            params: {
              name: 'test'
            }
          })
        })
    }
    .height('100%')
  }

3、返回上一页面或指定的页面

java 复制代码
build() {
    Row() {
      Button('返回')
        .onClick(() => {
          router.back()
          // or
          router.back({
             url: '....'
		  })
        })
    }
    .height('100%')
  }

4、清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。

java 复制代码
router.clear()

5、获取当前在页面栈内的页面数量

java 复制代码
router.getLength()

6、获取当前页面的状态信息

java 复制代码
router.getState()

7、获取url传参

注意:这里的参数key必须用 'xx' , 不能写成 .xx , 否则报如下错:

相关推荐
●VON3 分钟前
AtomGit Flutter鸿蒙客户端:设置页面
flutter·华为·跨平台·harmonyos·鸿蒙
FrameNotWork3 分钟前
HarmonyOS6.1 AI 模型管理架构设计与最佳实践
人工智能·harmonyos
wordbaby14 分钟前
rn-cross-calendar:一个兼容 React 18/19、RN/RNOH 的跨平台日历组件
前端·react native·harmonyos
●VON1 小时前
AtomGit Flutter鸿蒙客户端:用户资料
flutter·华为·架构·跨平台·harmonyos·鸿蒙
风华圆舞2 小时前
Stage 模型下 Flutter 鸿蒙壳工程怎么理解
flutter·华为·harmonyos
●VON2 小时前
AtomGit Flutter鸿蒙客户端:数据模型
android·服务器·安全·flutter·harmonyos·鸿蒙
祭曦念2 小时前
鸿蒙原生ArkTS布局之RowStart垂直对齐详解
华为·harmonyos
●VON2 小时前
AtomGit Flutter鸿蒙客户端:收藏仓库
flutter·架构·跨平台·harmonyos·鸿蒙
nashane3 小时前
HarmonyOS 6商城开发学习:抢票倒计时与系统日历提醒——票务类场景的完整落地思路
学习·华为·harmonyos
●VON3 小时前
AtomGit Flutter鸿蒙客户端:主题系统
javascript·flutter·华为·跨平台·harmonyos·鸿蒙