鸿蒙 next 5.0 版本页面跳转传参 && 接受参数 ,,接受的时候 要先定义接受参数的类型, 代码可以直接CV使用 [教程]

1, 先看效果

2, 先准备好两个页面

index 页面 传递参数

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

@Entry
@Component
struct Index {

  @State
  list: string[] = ['星期一', '星期二','星期三', '星期四','星期五']

  @State
  activeIndex: number = 0

  build() {
    Row() {
      Column({ space: 10 }) {
        ForEach(this.list, (item: string, index: number) => {
          Text(item)
            .width('100%')
            .height(50)
            .textAlign(TextAlign.Center)
            .fontSize(16)
            .backgroundColor(this.activeIndex === index ? Color.White : Color.Orange)
            .onClick(()=>{
              this.activeIndex = index
              console.log('111',this.activeIndex)
            })
        })
        Row(){
          Text('跳转传参')
            .onClick(()=>{
              router.pushUrl({
                url:'pages/one',
                params: {value:'test'}
              })
            })
        }
      }
      .width(90)
    }
    .padding(15)
    .backgroundColor(Color.Pink)
    .width('100%')
    .alignItems(VerticalAlign.Center)
  }
}

3, 接受参数

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

// 声明接受参数的类型
interface PARAMS {
  value: string
}

@Entry
@Component
struct one {

  @State
   paramsValue: PARAMS = {
    value: ''
  }

  aboutToAppear() {
    // as 转换一下变成我们要接受的类型
    this.paramsValue = router.getParams() as PARAMS

    // 控制台打印
    console.log(`111, ${JSON.stringify(this.paramsValue)}`)

    // 提示传过来的内容
    promptAction.showToast({message: this.paramsValue.value})
  }

  build() {
    Column(){
      Text('55555555555')

      // 显示传的参数内容
      Text(this.paramsValue.value)

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
相关推荐
程序员潘Sir19 小时前
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
harmonyos·鸿蒙
程序员潘Sir2 天前
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
harmonyos·鸿蒙
程序员潘Sir3 天前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙
猫林老师3 天前
HarmonyOS数据持久化:Preferences轻量级存储实战
华为·harmonyos
Devil枫3 天前
鸿蒙深链落地实战:从安全解析到异常兜底的全链路设计
安全·华为·harmonyos
广州腾科助你拿下华为认证3 天前
华为考试:HCIE数通考试难度分析
大数据·华为
与天仙漫步星海3 天前
华为基本命令
华为
低调小一3 天前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos
猛码Memmat3 天前
华为HarmonyOS开发文档
华为·harmonyos