华为鸿蒙 使用router跳转页面 和 router.getParams接收参数并使用参数 [最简单 最直接 的详细教程 ]

1, 准备两个页面 

1. pages/DetailPage.ets

2. pages/Index.ets

2, 代码直接 cv   页面 // pages/Index.ets

import router from '@ohos.router'

// 参数类型
class User {
  name: string
  age: number
}

@Entry
@Component
struct Index {

  // 要传的参数
  @State
  user: User = {
    name: 'John',
    age: 30
  }


  build() {
    Column({space:15}){
      Text('index page')
        .fontSize('40')
      Button('jump to detail page')
        .onClick(()=>{
        //   1. 跳转页面
          router.pushUrl(
            {
              url:'pages/DetailPage',
              params: this.user // 传参
            }
          )

        //   2. 跳转  替换页面
        //      router.replaceUrl({ url:'pages/DetailPage'})
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

 

3, 直接 cv 代码 pages/DetailPage.ets

 

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct DetailPage {
  // 第一中方法接收参数
  @State
  title: string = router.getParams()?.['name']

  // 第二种方法接收参数
  aboutToAppear(){
    const  params = router.getParams()
    // 打印参数 params 打印出来是一个对象
    console.log('11111',params)
    promptAction.showToast({ message: params['name'] + params['age'] })
  }

  build() {
    Column({space:15}){
      Text('Detail page')
        .fontSize(40)
      // 使用参数
      Text(this.title)
      Button('back')
        .onClick(()=>{
        //   1. 跳到上一个页面
          router.back()
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

 4, 打印参数