HarmonyOS 鸿蒙Next中Navigation获取参数

HarmonyOS 鸿蒙Next中Navigation获取参数 Navigation跳转页面如何获取参数

5 回复

【解决方案】

方案一：API15+可以通过onResult可以获取C页面返回的数据。

方案二：通过getParamByName获取C页面返回的数据，需将页面栈操作模式LaunchMode指定为POP_TO_SINGLETON。

方案三：通过pop返回到上个页面并传入参数，在上个页面pushPath中的onPop方法获取数据。

更多关于HarmonyOS 鸿蒙Next中Navigation获取参数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


传递参数：源页面可通过pushPath、pushPathByName、pushDestination等接口指定页面跳转，本例以pushDestination接口举例说明，pushDestination可通过入参NavPathInfo指定目标页面（name）、传递参数（param）、回调函数（onPop）等。

接收参数：目标页面可通过NavDestination的onReady回调函数接收源页面传递的参数，也可在组件的生命周期函数aboutToAppear中通过NavPathStack的getParamByIndex、getParamByName等接口获取源页面传递的参数。
示例代码：

  1. 在目标页面的 onReady 回调中直接获取参数

当 NavDestination 页面首次创建时，会触发 onReady 回调，可以通过 NavDestinationContext 的 pathInfo.param 直接获取跳转时传递的参数：

@Component
struct Page01 {
  pathStack: NavPathStack | undefined = undefined;
  pageParam: string = '';

  build() {
    NavDestination() {
      // 页面内容
    }
    .title('Page01')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
      this.pageParam = context.pathInfo.param as string; // 直接获取参数
    })
  }
}

2. 通过 NavPathStack 的接口主动查询参数

在其他业务场景（如非页面创建时），可以通过 NavPathStack 提供的方法主动获取指定页面的参数：

  • getParamByIndex(index: number)：根据页面在栈中的索引获取参数。
  • getParamByName(name: string)：根据页面名称获取所有同名页面的参数（返回数组）。

示例代码：

// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1);

// 获取名为"PageOne"的所有页面的参数
this.pageStack.getParamByName("PageOne");

注意事项

  1. 参数传递类型： Navigation 跳转时参数通过 param: Object 传递（如 pushPathByName 的第二个参数）。

  2. 参数有效性： 通过 getParamByIndex 或 getParamByName 获取参数时，若索引或名称无效，可能返回 undefined。

在HarmonyOS Next中，Navigation组件通过路由参数传递数据。使用router.pushUrl()方法跳转时，可通过params字段携带参数。目标页面通过router.getParams()获取传递的参数对象。参数以键值对形式存储，支持字符串、数字等基本数据类型。页面间参数传递需确保数据类型一致，避免解析错误。

在HarmonyOS Next中，通过Navigation跳转页面时，可以使用router.pushUrl()方法传递参数，并在目标页面通过router.getParams()获取参数。示例如下：

  1. 传递参数（源页面）：

    import router from '[@ohos](/user/ohos).router';

let params = { id: 123, name: 'example' };
router.pushUrl({
  url: 'pages/TargetPage',
  params: params
});

  2. 获取参数（目标页面）：

    import router from '[@ohos](/user/ohos).router';

let params = router.getParams();
let id = params['id']; // 123
let name = params['name']; // 'example'

确保目标页面在onPageShow或aboutToAppear生命周期中处理参数，以避免页面未渲染时获取不到数据。

回到顶部