HarmonyOS 鸿蒙Next中Navigtion路由的页面传值的问题

HarmonyOS 鸿蒙Next中Navigtion路由的页面传值的问题 现在有一个场景是一个组件页面通过pushPathByName传值到一个NavDestination页面,并且在这个页面能对传的值进行修改并返回。请问该如何实现

3 回复

对于Navigation组件中使用pushPath方法,如果希望能够成功收到onPop的回调,需要在pop时传入result参数。

参考文档:

https://developer.huawei.com/consumer/cn/doc/architecture-guides/common-v1_26-ts_34-0000002263888774

更多关于HarmonyOS 鸿蒙Next中Navigtion路由的页面传值的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next中Navigation路由传值可通过页面参数实现。在调用navigateTo时,使用params字段传递键值对数据:

router.navigateTo({
  url: 'pages/TargetPage',
  params: { id: 123, name: 'example' }
})

目标页面通过getParams方法获取参数:

const params = router.getParams()

参数类型支持字符串、数字等基本类型,不支持传递对象。页面间数据传递需保持参数简洁,避免复杂数据结构。

在HarmonyOS Next中,可以通过pushPathByName传递参数,并在目标页面使用routerParams接收和修改参数。以下是实现步骤:

  1. 传递参数:使用pushPathByName时,通过params字段传递数据。

    import router from '[@ohos](/user/ohos).router';
    router.pushPathByName({
      name: 'TargetPage',
      params: { data: yourValue }
    });
    
  2. 接收参数:在目标页面的onPageShow或构造函数中通过router.getParams()获取参数。

    let params = router.getParams() as Record<string, Object>;
    let receivedData = params?.['data'];
    
  3. 修改参数:直接对接收到的数据进行修改(注意引用类型数据的可变性)。

    receivedData.property = newValue; // 若为对象类型
    
  4. 返回数据:通过router.back()返回,若需回传数据可使用router.push或全局状态管理(如AppStorage)暂存修改后的值。

    router.back();
    

注意:页面传值依赖路由栈管理,直接修改参数会影响原始数据(若传递的是对象引用)。若需隔离修改,建议深拷贝数据或使用状态管理工具。

回到顶部