鸿蒙路由参数传递

页面test.ets

代码如下:

复制代码
import router from '@ohos.router'
@Entry
@Component
struct Test {
  @State message: string = 'Hello World'
  @State username: string = 'hu'
  @State password: string = '1'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            router.pushUrl({
              url: "pages/mine/MinePage",
              params: {
                username: this.username,
                password: this.password
              }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

页面MinePage.ets如下:

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

@Entry
@Component
struct MinePage {
  @State username: string = ''
  @State password: string = ''

  aboutToAppear() {
    const params = router.getParams() as { username?: string; password?: string }
    this.username = params.username ?? ''
    this.password = params.password ?? ''
  }


  build() {
    Column() {
      Text(`欢迎你,${this.username}`)
      Text(`你的密码是:${this.password}`)
    }.padding(20)
  }
}

运行结果如下:

相关推荐
左手厨刀右手茼蒿2 天前
Flutter 组件 sheety_localization 的适配 鸿蒙Harmony 实战 - 驾驭在线协作式多语言管理、实现鸿蒙端动态词条下发与全球化敏捷发布方案
flutter·harmonyos·鸿蒙·openharmony·sheety_localization
星释2 天前
鸿蒙Flutter实战:30.在Pub上发布鸿蒙化插件
flutter·harmonyos·鸿蒙
梁山好汉(Ls_man)2 天前
鸿蒙应用如何新建页面
华为·harmonyos·鸿蒙·arkui
睿麒3 天前
json2est 的用法
鸿蒙
SY.ZHOU3 天前
移动端架构体系(五):终篇总结
flutter·ios·系统架构·安卓·鸿蒙
@不误正业3 天前
AI-Agent记忆系统深度实战-3大范式源码对比与鸿蒙端实现
人工智能·agent·鸿蒙
梁山好汉(Ls_man)4 天前
鸿蒙_自定义组件包含多个引用自定义构建函数@BuilderParam时的用法
华为·harmonyos·鸿蒙·arkui
UnicornDev4 天前
【HarmonyOS 6】鸿蒙原生应用智能体接入
华为·harmonyos·arkts·鸿蒙·鸿蒙系统
梦想不只是梦与想4 天前
鸿蒙中 PhotoViewPicker:选择图片或视频
harmonyos·鸿蒙·photoviewpicker
星释4 天前
鸿蒙Flutter实战:29.优先使用联合插件开发鸿蒙化插件
flutter·华为·harmonyos·鸿蒙