鸿蒙Next navigation返回传值方法

在鸿蒙Next开发中，如何通过navigation返回页面时传递参数？能否提供具体的代码示例或实现方法？

2 回复

鸿蒙Next的Navigation传值？简单！

  • 跳转时用params带参数：router.pushUrl({url: 'page/xxx', params: {data: '我要传值'}})
  • 目标页面用router.getParams()接收，记得判空防崩溃！
    返回时想带值？用router.back()前先存全局状态或EventHub发消息，别指望back()直接传参哦~

更多关于鸿蒙Next navigation返回传值方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，页面间导航返回传值可以通过以下方法实现：

1. 使用路由参数传递数据

在源页面通过路由参数传递数据，目标页面接收并处理。

源页面代码示例：

import router from '@ohos.router';

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

目标页面代码示例：

import router from '@ohos.router';

// 接收参数
const params = router.getParams();
if (params && params['key']) {
  console.log('接收到的参数:', params['key']);
}

2. 使用自定义事件传递数据

通过事件机制在页面间传递数据。

源页面代码示例：

import { emitter } from '@kit.BasicServicesKit';

// 发送事件和数据
emitter.emit({
  eventId: 1, // 事件ID
  data: { key: 'value' }
});

目标页面代码示例：

import { emitter } from '@kit.BasicServicesKit';

// 注册事件监听
emitter.on('eventId', (data) => {
  console.log('接收到的数据:', data);
});

3. 使用全局数据存储

通过全局状态管理（如AppStorage）共享数据。

源页面代码示例：

import { AppStorage } from '@kit.ArkData';

// 存储数据
AppStorage.setOrCreate('key', 'value');

目标页面代码示例：

import { AppStorage } from '@kit.ArkData';

// 读取数据
const value = AppStorage.get('key');
console.log('全局数据:', value);

4. 使用回调函数传值

在导航时传递回调函数，目标页面调用回调返回数据。

源页面代码示例：

import router from '@ohos.router';

// 定义回调函数
const callback = (data) => {
  console.log('返回的数据:', data);
};

// 传递回调到目标页面
router.pushUrl({
  url: 'pages/TargetPage',
  params: { callback }
});

目标页面代码示例：

import router from '@ohos.router';

// 获取回调并调用
const params = router.getParams();
if (params && params['callback']) {
  params['callback']('返回的值');
  router.back(); // 返回上一页
}

总结

  • 路由参数：适合简单数据传递。
  • 自定义事件：适合解耦的跨页面通信。
  • 全局存储：适合多个页面共享数据。
  • 回调函数：适合需要返回结果的场景。

根据具体需求选择合适的方法。

回到顶部