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

鸿蒙应用页面间传参示例

最新推荐文章于 2025-09-03 16:56:29 发布

原创

最新推荐文章于 2025-09-03 16:56:29 发布 · 6.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#华为 #harmonyos

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