鸿蒙Next中如何实现页面跳转传参

在鸿蒙Next开发中，我想实现两个页面之间的跳转并传递参数，具体应该怎么做？比如从首页跳转到详情页时需要携带一个ID参数，代码该如何编写？能否提供示例说明路由配置和参数接收的方法？

2 回复

在鸿蒙Next中，页面跳转传参就像给朋友递小纸条！用router.pushUrl()时，在params里塞数据就行：

router.pushUrl({
  url: 'pages/Detail',
  params: { id: 123, name: '张三' }
})

目标页面用router.getParams()就能收到小纸条啦！简单得像点外卖加备注~

更多关于鸿蒙Next中如何实现页面跳转传参的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，页面跳转传参可以通过以下方式实现：

1. 使用router.pushUrl()方法传参

  • 在源页面，通过router.pushUrl()方法传递参数到目标页面。
  • 参数以键值对形式放入params对象中。

示例代码：

import { router } from '[@kit](/user/kit).ArkUI';

// 源页面：传递参数
let params = {
  id: 1001,
  name: 'HarmonyOS'
};

router.pushUrl({
  url: 'pages/TargetPage', // 目标页面路径
  params: params // 传递的参数
});

目标页面接收参数： 在目标页面的aboutToAppear生命周期或使用@State装饰器接收参数。

import { router } from '[@kit](/user/kit).ArkUI';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct TargetPage {
  @State id: number = 0;
  @State name: string = '';

  aboutToAppear() {
    const params = router.getParams() as Record<string, number | string>; // 获取参数
    if (params) {
      this.id = params['id'] as number;
      this.name = params['name'] as string;
    }
  }

  build() {
    // 使用参数
    Text(`ID: ${this.id}, Name: ${this.name}`)
  }
}

2. 使用router.push()方法传参

  • 类似pushUrl，但push()方法允许传递更多配置选项。

示例代码：

router.push({
  url: 'pages/TargetPage',
  params: { key: 'value' }
});

注意事项：

  • 参数类型：传递的参数需为可序列化类型（如字符串、数字、对象）。
  • 路径配置：确保目标页面路径已在module.json5中正确配置。
  • 生命周期：在目标页面的aboutToAppear中获取参数，确保页面显示前参数已赋值。

通过以上方法，可以灵活实现页面间参数传递。

回到顶部