鸿蒙路由参数传递

页面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)
  }
}

运行结果如下:

相关推荐
ChinaDragonDreamer13 小时前
HarmonyOS:使用PickerController将编辑后的图片替换原图
harmonyos·鸿蒙
幽蓝计划1 天前
仓颉开发语言入门教程:搭建开发环境
开发语言·鸿蒙
周胡杰2 天前
组件导航 (Navigation)+flutter项目搭建-混合开发+分栏
数码相机·flutter·华为·电脑·harmonyos·鸿蒙
小陈从不熬夜2 天前
HarmonyOS AVPlayer 音频播放器
华为·音视频·鸿蒙
特立独行的猫a3 天前
uni-app 开发HarmonyOS的鸿蒙影视项目分享:从实战案例到开源后台
uni-app·开源·harmonyos·鸿蒙·影视
Raink老师3 天前
鸿蒙页面布局入门
华为·harmonyos·鸿蒙·移动端布局
周胡杰4 天前
组件导航 (HMRouter)+flutter项目搭建-混合开发+分栏效果
前端·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
SuperHeroWu75 天前
【HarmonyOS 5】鸿蒙mPaaS详解
华为·harmonyos·鸿蒙·mpaas·alipay
shadon1785 天前
【鸿蒙开发】性能优化
性能优化·鸿蒙