鸿蒙 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)
  }
}