鸿蒙路由参数传递

页面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 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker16 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
冰天糖葫芦3 天前
鸿蒙Next原生应用开发AES加解密
鸿蒙·aes加解密
SuperHeroWu74 天前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
SuperHeroWu74 天前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
weixin_541299944 天前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
HarmonyOS小助手9 天前
从航旅纵横到东南亚Grab:鸿蒙生态的“星辰大海”,由开发者共绘
harmonyos·鸿蒙·鸿蒙生态
逻极9 天前
HarmonyOS从入门到精通:自定义组件开发指南(二):组件属性与参数传递
华为·harmonyos·arkts·鸿蒙·自定义组件