HarmonyOS鸿蒙NEXT中跨模块页面路由及传参示例代码

HarmonyOS鸿蒙NEXT中跨模块页面路由及传参示例代码

介绍

本案例实现了一个跨包路由至共享页面的功能，通过Navigation组件+系统路由表来实现，同时可以在跨包路由时向共享页传递参数，共享页返回时也可携带参数回到首页。

跨模块页面路由及传参源码链接

效果预览

图片名称

使用说明

进入应用，点击不同页面跳转，进行传参演示。

实现思路

  1. 通过Navigation组件结合路由栈NavPathStack来管理页面路由。
Navigation(this.pathStack) {
    // 这里是首页内容
}
  .titleMode(NavigationTitleMode.Free)
  .title({ height: 50, builder: this.navigationTitleBuilder },
    { paddingStart: LengthMetrics.vp(10), paddingEnd: LengthMetrics.vp(10) })
  .menus(this.menuBuilder)
  .backgroundColor('#95eeeeee')
  1. 在路由至对应页面时，可以传递参数，同时可以设置onPop回调，该回调能够从返回的页面那里拿到返回的结果，从而实现页面来回传参。
this.pathStack.pushPath({
  name: page.name,
  param: page.param,
  onPop: (info: PopInfo) => {
    if (info.result) {
      if (info.info.name === 'FirstPage') {
        this.backParams[0] = info.result as string[];
      } else {
        this.backParams[1] = info.result as string[];
      }
    }
  }
})
  1. 页面返回前设置弹窗进行确认，在确认返回后才会退出当前页面并携带参数返回。

更多关于HarmonyOS鸿蒙NEXT中跨模块页面路由及传参示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS NEXT中，跨模块页面路由使用Router模块实现。示例代码：

  1. 导入Router：
import router from '@ohos.router'
  1. 跳转页面并传递参数：
router.pushUrl({
  url: 'pages/PageB',
  params: {key1: 'value1', key2: 123}
})
  1. 目标页面接收参数：
const params = router.getParams()
let key1 = params['key1']
let key2 = params['key2']

注意url路径需在module.json5中提前配置路由信息。传参支持基本数据类型和对象。

更多关于HarmonyOS鸿蒙NEXT中跨模块页面路由及传参示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS NEXT中实现跨模块页面路由及传参确实是一个常见需求。从您提供的代码示例来看，主要使用了Navigation组件和NavPathStack来实现这个功能，这是一个标准的实现方式。

关于代码实现，我有几点补充说明：

  1. 路由传参部分：
  • 使用pathStack.pushPath()方法时，可以通过param属性传递参数
  • 参数可以是任意可序列化的对象，建议保持参数结构简单
  1. 回调处理：
  • onPop回调中可以通过PopInfo对象获取返回结果
  • 返回结果(result)和路由信息(info)都可以在回调中获取
  1. 页面返回确认：
  • 可以在目标页面中实现返回拦截
  • 通过设置返回参数来控制是否允许返回

这个实现方案很好地展示了HarmonyOS中页面路由的基本模式，特别是跨模块传参的处理方式。代码结构清晰，参数传递和返回处理都考虑得比较全面。

对于需要更复杂传参的场景，可以考虑使用EventHub或Ability间通信的方式，但对于简单的页面跳转传参，这种实现已经足够。

回到顶部