OpenHarmony: 如何实现跨模块的页面跳转功能

在OpenHarmony开发中，当业务体系庞大复杂时，常常会将业务拆分为多个子业务模块（单个子业务模块为一个 har/hsp）。这时，从主业务入口跳转到不同子页面模块，或者从一个子业务模块 A 页面跳转到另一个子业务模块 B 页面就成了常见需求，比如从应用首页跳转到登录子业务模块页面。以下将介绍三种实现跨模块页面跳转的解决方案。

一、方案一：router.pushNamedRoute()

使用 router 的命名路由接口 router.pushNamedRoute()进行跳转。其详细的使用方法可参考页面路由 (router)。这种方式相对简洁直接，在简单的跨模块跳转场景中能够快速实现功能。然而，在面对复杂的业务逻辑和众多模块交互时，例如在处理大量路由参数传递和复杂的页面关系维护时可能会稍显吃力。

二、方案二：navigation 组件跳转

以从应用入口模块的页面 NavigationPage 跳转到 Login 子业务模块页面 LoginPage 为例，详细步骤如下：

1. Login 模块组件开发与导出：在 Login 模块中开发自定义组件 LoginPage（即路由跳转目的地），并对外导出。

@Component 
export struct LoginPage { 
  @Consume('pathStack') pathStack: NavPathStack; 
  @State message: string = 'Login Page'; 
 
  build() { 
    NavDestination() { 
      Column() { 
        Text(this.message) 
         .fontSize(50) 
         .fontWeight(FontWeight.Bold) 
      } 
     .width('100%') 
     .height('100%') 
    } 
   .onBackPressed(() => { 
      this.pathStack.pop(); 
      return true; 
    }) 
  } 
}

1. Login 模块入口文件处理：在 Login 模块的入口文件 Index.ets 中导出自定义组件。

export { LoginPage } from './src/main/ets/pages/loginPage';

1. 入口模块依赖添加：在入口模块的 oh - package.json5 文件中添加对 Login 模块的依赖。

{ 
  //... 
  "dependencies": { 
    "@ohos/login": "file:../login" 
  } 
}

1. 入口模块页面组件导入与路由添加：入口模块 LoginPage 页面导入 Login 模块的自定义组件，并添加到 Navigation 组件的路由表中。

// 导入 Login 模块自定义组件 
import { LoginPage } from '@ohos/login'; 
 
@Entry 
@Component 
struct NavigationPage { 
  @Provide('pathStack') pathStack: NavPathStack = new NavPathStack(); 
 
  @Builder 
  pageMap(name: string) { 
    if (name === 'loginPage') { 
      LoginPage() 
    } 
  } 
 
  build() { 
    Navigation(this.pathStack) { 
      Button('jump to login page') 
       .onClick(() => { 
          // NavPathInfo 第二个参数为自定义参数，可用于信息传递 
          let pathInfo: NavPathInfo = new NavPathInfo('loginPage', new Object()); 
          this.pathStack.pushDestination(pathInfo, true); 
        }) 
    } 
   .navDestination(this.pageMap) 
  } 
}

这种方案通过 Navigation 组件实现了跨模块跳转，并且可以对路由栈进行一定的操作，但当模块间跳转需求增多时，各个模块间会产生非常复杂的依赖关系，甚至会导致多个 har/hsp 间循环依赖。

三、方案三：基于 navigation 组件的自定义路由框架跳转

方案二虽然可行，但存在模块强耦合的问题。为解决此问题并提升页面加载性能，推荐使用自定义路由框架。其整体思路如下：

1. 路由管理模块创建：自定义一个路由管理模块 RouterModule，各个需要使用路由功能的模块均依赖此模块。
2. 路由栈封装与能力提供：路由管理模块 RouterModule 内部定义路由栈 NavPathStack，并对 NavPathStack 进行封装，对外提供路由能力。
3. Navigation 组件注册：在使用 Navigation 组件时，需将 Navigation 组件对应的 NavPathStack 注册到路由管理模块中，通过路由管理模块 RouterModule 的 NavPathStack 对路由能力进行控制。
4. 页面构建函数转换：各个路由页面不再提供组件，转为提供 @builder 封装的构建函数，再通过 WrappedBuilder 封装进行传递使用。
5. 页面注册与跳转：各个路由页面将模块名称、路由名称、WrappedBuilder 封装后的构建函数注册到路由管理模块 RouterModule 的路由表中。当路由需要跳转到指定路由时，调用路由管理模块 RouterModule 的 push 方法。该方法对指定的模块的路由页面动态导入，并完成路由跳转。