使用Navigation系统路由表时，页面返回上一个页面传递参数方式 - HarmonyOS 鸿蒙Next

使用Navigation系统路由表时，页面返回上一个页面传递参数方式 - HarmonyOS 鸿蒙Next 【设备信息】Mate60

【API版本】Api13

【DevEco Studio版本】5.0.7.200

【问题描述】

使用Navigation系统路由表时，页面返回上一个页面传递参数方式及目标页面参数接收方式。 目前页面跳转使用Navigation系统路由表，页面跳转时，使用

let params: PageOneParams = {
  oneParam: "oneParam"
};

his.pageInfos.pushPathByName('pageOne', params);

在目标页面.

onReady((context: NavDestinationContext) => {
  this.pageInfos = context.pathStack;
  Logger.info("current page config info is " + JSON.stringify(context.getConfigInRouteMap()));
  let params: PageOneParams = context.pathInfo.param as PageOneParams;
  console.log(JSON.stringify(params));
})

方法中接收参数。

但在页面返回时，使用

let params: PageOneParams = {
  oneParam: "oneParamFromTwo"
};

this.pageInfos.popToName("pageOne", params);

却无法在目标页面onReady方法中接收到参数，查看文档说是onReady只在页面创建时调用。

在这种场景下，如何在目标页面正常接收返回参数？


更多关于使用Navigation系统路由表时，页面返回上一个页面传递参数方式 - HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

数据传递参考以下demo

Index.ets页面

//index.ets
@Builder
routerMap(builderName: string, param: object) {
  if (builderName === 'featureA') {
    FeatureIndex(param);
  }
};
aboutToAppear(): void {
  this.entryHapRouter.pushPathByName("featureA", "测试", true)
}

FeatureIndex.ets页面

@Builder
export function FeatureIndex(value: object) {
  NavDestination() {
    Column() {
      Text('Hello FeatureA Page')
      Text(`传入的参数：${JSON.stringify(value)}`)
        .margin(20)
    }
    .width('100%')
    .height('100%')
  }
  .hideTitleBar(true)
}

路由表的传递方式如下：

index.ets
@Entry
@Component
struct NavigationExample {
//绑定 NavPathStack
  @Provide('NavPathStack')pageInfo: NavPathStack = new NavPathStack()
  build() {
    Navigation(this.pageInfo) {
      Column() {
        Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfo.pushPath({ name: 'pageOne',param:"测试参数" }); 
          })
      }
    }.title('NavIndex')
    .backgroundColor(Color.Orange)
  }
}
//PageOne.ets 子页面绑定NavPathStack
@Consume('NavPathStack') pageInfo: NavPathStack;
  aboutToAppear(): void {
    this.message = this.pageInfo.getParamByIndex(0) as string
    console.log(JSON.stringify(this.pageInfo));
  }

更多关于使用Navigation系统路由表时，页面返回上一个页面传递参数方式 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


A->B

A画面上注册onPop回调

B返回到A画面时候，在A的回调里可以接收B的参数

PageA
```typescript
this.pageInfos.pushPath({
  name:'PageB',
  param: params,
  onPop: (popInfo: PopInfo) => {
    let str: string = JSON.stringify(popInfo.result);
    callback(rsp)
  }
});

PageB

let rsp = xxxx;
this.pageInfos.pop(rsp, false);

在HarmonyOS鸿蒙Next中，使用Navigation系统路由表时，页面返回上一个页面传递参数可以通过router.push方法的params参数来实现。在目标页面中，可以通过router.getParams方法获取传递的参数。具体步骤如下：

  1. 传递参数：在跳转到下一个页面时，使用router.push方法并传入params参数。例如：

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

  2. 获取参数：在目标页面中，使用router.getParams方法获取传递的参数。例如：

    const params = router.getParams();
console.log(params.key); // 输出 'value'

  3. 返回上一个页面：在目标页面中，使用router.back方法返回上一个页面，并可以通过params参数传递数据。例如：

    router.back({
  params: { returnKey: 'returnValue' }
});

  4. 接收返回参数：在源页面中，可以通过router.getParams方法获取返回的参数。例如：

    const returnParams = router.getParams();
console.log(returnParams.returnKey); // 输出 'returnValue'

这种方式适用于在页面之间传递简单数据，且不需要复杂的回调机制。

回到顶部