探索HarmonyOS：一键掌握Router与NavPathStatck的传参和页面回调技巧

原创

已于 2024-10-31 11:18:19 修改 · 1.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

于 2024-10-31 10:23:53 首次发布

路由的选择

HarmonyOS提供两种路由实现的方式，分别是 Router 和 NavPatchStack。两者使用场景和特效各有优劣。

组件	适用场景	特点	备注
Router	模块间与模块内页面切换	通过每个页面的url实现模块间解耦
NavPathStack	模块内页面切换	通过组件级路由统一路由管理

什么时候使用 NavPatchStack ?

如果是单包应用开发，不使用动态包（hsp）进行拆包，只是使用静态包（har）简单的进行模块拆分，那么我推荐使用 navPatchStack。

什么时候使用 Router ?

如果像开发 鸿蒙元服务，对单包体积有 2M 的限制，那么我们不得不使用动态包的方式。将相对独立的功能，二级页面等拆分出去，封装成动态包，可避开 dependencies 直接依赖得引用形式。

此时使用 router 跳转 url 的方式才可跳转到动态包内非直接引用的页面

NavPatchStatck 如何跳转（传参）及页面回调

NavPathStack 是配合 Navigation 一起使用的，
Navigation导航组件做统一的页面跳转管理，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。

如何跳转（传参）及实现页面回调？

//第一步：定义一个用于传参和实现页面回调的模型
export interface RouterModel {
   
   
  params?: Object, // 要传递给跳转页面的参数
  popCallback?: (value: Object | undefined) => void // 用于页面回调
}

//第二步，需要在应用的根页面自行维护 navStack 实例，并传递给根节点 Navigation
@Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack()

Navigation(this.pageInfos) {
   
   
  Column() {
   
   }
}
.title('NavIndex')
.navDestination(this.PageMap)


// 统一管理维护路由跳转
@Builder
  PageMap(name: string, params: RouterModel) {
   
   
    if (name === 'pageOne') {
   
   
      TestNavPathPage({
   
    // TestNavPathPage 就是要跳转的目标页面
        routerParams: params
      })
    } else {
   
   
      // 默认空页面
    }
}

/// 任意一个页面获取 navPathStack 调用跳转并传参
@Component
export struct RouterCallbackExample {
   
   
  @Consume('navPathStack') navPathStack: NavPathStack;
 

  // NavPatchStack 方式跳转并获取回调
  navPathStackJump() {
   
   
    const routerParams: RouterModel = {
   
   
      params: '我是入参 123', //传递到跳转页面的入参
      popCallback: (callbackValue) => {
   
   
        // 这里拿到回调结果，注意要判断 callbackValue !== undefine
        // 这里拿到下面目标页面回传的结果 ‘我是回调的结果 345’
      }
    }
   this.navPathStack.pushPathByName('pageOne', routerParams) // 'pageOne' 对应上面 'PageMap' 方法内定义的路径名称常量
  }

  build() {
   
   
    Button('跳转').onClick(() => {
   
   
        this.navPathStackJump()
    })
  }
}

/// 目标页面接收入参、并返回页面回调
@Component
export struct TestNavPathPage {
   
   
  @Consume('navPathStack') navPathStack: NavPathStack;
  routerParams?: RouterModel
  @State receiveParams: string = ''

  aboutToAppear(): vo