鸿蒙 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)
  }
}
相关推荐
低调小一5 小时前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos
猛码Memmat8 小时前
华为HarmonyOS开发文档
华为·harmonyos
流影ng11 小时前
【HarmonyOS】MVVM与三层架构
华为·架构·harmonyos
爱笑的眼睛1111 小时前
HarmonyOS Stage 模型与 ArkUI 声明式开发深度实践:构建高效稳定的应用
华为·harmonyos
鸿蒙小白龙11 小时前
鸿蒙应用之网络请求方案总结
harmonyos·鸿蒙·鸿蒙系统·open harmony
安卓开发者11 小时前
鸿蒙Next ArkWeb网页文件上传与下载完全指南
华为·harmonyos
低调小一11 小时前
「2025最新」HarmonyOS 5.1 HelloWorld项目深度解析:从零到一完整开发指南
华为·harmonyos
咏方舟【长江支流】12 小时前
AI+华为HarmonyOS开发工具DevEco Studio详细安装指南
人工智能·华为·移动开发·harmonyos·arkts·deveco studio·长江支流
赵健zj13 小时前
鸿蒙实现右滑加载更多
鸿蒙