鸿蒙Next navigation路由跳转如何获取参数

在鸿蒙Next开发中，使用navigation进行路由跳转时，如何在目标页面获取传递的参数？具体应该调用哪个API或方法？有没有代码示例可以参考？

2 回复

鸿蒙Next里拿路由参数？简单！
在目标页的aboutToAppear里用router.getParams()就行，比如：

const params = router.getParams() as Record<string, string>;
const id = params['id']; // 拿到跳转时传的id

记得跳转时用`router.pushUrl({url: '页面?

更多关于鸿蒙Next navigation路由跳转如何获取参数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过路由参数传递和接收数据，具体方法如下：

1. 传递参数

使用router.pushUrl()时，在params中设置参数：

import router from '@ohos.router';

// 跳转时传递参数
router.pushUrl({
  url: 'pages/DetailPage',
  params: { id: 123, name: '示例' }
})

2. 接收参数

在目标页面通过router.getParams()获取参数：

import router from '@ohos.router';

// 在目标页面的onPageShow或aboutToAppear中获取
onPageShow() {
  const params = router.getParams() as Record<string, Object>;
  console.log('接收参数:', params.id, params.name); // 输出：123 和 '示例'
}

3. 完整示例

// 页面A - 传递参数
router.pushUrl({
  url: 'pages/DetailPage',
  params: { 
    userId: 'U001',
    productId: 'P100'
  }
})

// 页面B - 接收参数
onPageShow() {
  const params = router.getParams();
  if (params) {
    let userId = params['userId'] as string;
    let productId = params['productId'] as string;
    // 使用参数...
  }
}

注意事项：

  • 参数类型为Object，使用时需进行类型转换
  • 建议在onPageShow生命周期中获取，确保参数已加载
  • 参数通过序列化传递，复杂对象需自行处理

这种方式适用于页面间简单数据传递，如需复杂数据共享建议使用AppStorage。

回到顶部