HarmonyOS 路由传参

本文 我们来说两个page界面间的数据传递

路由跳转 router.pushUrl 之前我们用了不少了 但是我们只用了它的第一个参数 url

其实他还有个params参数

我们第一个组件可以编写代码如下

typescript 复制代码
import router from '@ohos.router'
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Button("跳转").onClick(()=>{
          router.pushUrl({
            url: "pages/AppView",
            params: {
              name: "小猫猫",
              age: 20
            }
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这里 我们button按钮设置点击事件 调用 router.pushUrl 跳转向 pages/AppView 页面

然后第二个参数 params 是一个对象 键值对 就是我们要传递给下一个界面的参数

我们第二个界面这样写

typescript 复制代码
import router from '@ohos.router'

let name:string = router.getParams()["name"]
let age:number = router.getParams()["age"]

@Entry
@Component
struct AppView {
  build() {
    Row() {
      Column(){
        Text(name)
        Text(""+age)
      }
      .width('100%')
    }
    .height('100%')
  }
}

通过 router.getParams 就可以取到上一个界面传过来的值 然后 后面一对数组括号 告诉它你要取哪个字段

然后 我们用text组件展示内容 因为text 不能用数字 所以我们要用 字符串加的方式 将age转存字符串类型的

我们开启预览模式 运行index组件

然后点击按钮

跳转后 第二个界面也就顺利的拿到了传过来的参数

相关推荐
低调小一4 小时前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos
程序员江同学7 小时前
ovCompose + AI 开发跨三端的 Now in Kotlin App
android·kotlin·harmonyos
猛码Memmat8 小时前
华为HarmonyOS开发文档
华为·harmonyos
祥睿夫子8 小时前
ArkTS 未被深挖的核心点:静态多态限制、静态成员与单例实战
harmonyos
高心星10 小时前
HarmonyOS 5.0应用开发——V2装饰器@local的使用
harmonyos
HarmonyOS_SDK10 小时前
【FAQ】应用A如何使用应用B内的文件?
harmonyos
万少11 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
流影ng11 小时前
【HarmonyOS】MVVM与三层架构
华为·架构·harmonyos
爱笑的眼睛1111 小时前
HarmonyOS Stage 模型与 ArkUI 声明式开发深度实践:构建高效稳定的应用
华为·harmonyos