《探索 HarmonyOS NEXT (5.0)：开启构建模块化项目架构奇幻之旅 —— 动态路由 ZRouter：引领高效模块通信的智慧中枢》

ZRouter简介：是一款轻量级的动态路由框架，基于Navigation系统路由表和Hvigor插件实现的方案，可以解决多个业务模块（HAR/HSP）之间解耦和通信问题，从而实现业务复用和功能扩展。
ZRouter出处ZRouter；

非常感谢大佬出的库，方便我们开发,提高我们开发效率，更详细的介绍和使用请看官方出处。
其它
Navigation官网

ZRouter的配置

ohpm install @hzw/zrouter

    // 远程依赖     "router-register-plugin":"1.1.1"

2.2. 初始配置，在每个模块中的hvigorfile.ts文件导入router-register-plugin插件模块，如下：

2.2.1：产品定制层 导入方式：

import { hapTasks } from '@ohos/hvigor-ohos-plugin';// 1、导入import { routerRegisterPlugin, PluginConfig } from 'router-register-plugin'// 2、初始化配置const config: PluginConfig = {  //scanDirs: ['src/main/ets/pages', 'src/main/ets/views'],  // 扫描的目录，如果不设置，默认是扫描src/main/ets目录  logEnabled: true, // 日志记录开关  viewNodeInfo: false, // 查看节点信息  isAutoDeleteHistoryFiles: true // 删除无用编译产物}export default {  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */  // 3、添加插件  plugins: [routerRegisterPlugin(config)] /* Custom plugin to extend the functionality of Hvigor. */}

2.2.2：基础特性层 导入方式：

import { harTasks } from '@ohos/hvigor-ohos-plugin';// 1、导入import { routerRegisterPlugin, PluginConfig } from 'router-register-plugin'// 2、初始化配置const config: PluginConfig = {    //scanDirs: ['src/main/ets/pages', 'src/main/ets/views'],  // 扫描的目录，如果不设置，默认是扫描src/main/ets目录    logEnabled: true, // 日志记录开关    viewNodeInfo: false, // 查看节点信息    isAutoDeleteHistoryFiles: true // 删除无用编译产物}export default {    system: harTasks, /* Built-in plugin of Hvigor. It cannot be modified. */    // 3、添加插件    plugins: [routerRegisterPlugin(config)] /* Custom plugin to extend the functionality of Hvigor. */}

2.3. 添加代码忽略： _generated目录和route_map.json文件在编译阶段自动生成的，建议在git的.gitignore忽略掉这两个文件。

_generatedroute_map.json

ZRouter的基本使用

1、 在EntryAbility的onCreate()方法中初始化ZRouter

    // 如果项目中存在hsp模块则传入true    ZRouter.initialize((config) => {      config.isLoggingEnabled = BuildProfile.DEBUG      config.isHSPModuleDependent = false    })

2、在Index页面使用Navigation作为根视图

3、页面跳转

1.普通跳转，通过页面的name去跳转，并可以携带param，name属性值建议用常量，方便后期维护。本例子中使用 NavName.LOGIN_VIEW

      // 跳转到登录页面      ZRouter.getInstance().navigation(NavName.LOGIN_VIEW)      // 携带参数跳转      ZRouter.getInstance()        .setParam("携带参数")        .navigation(NavName.LOGIN_VIEW)   // 获取参数   ZRouter.getInstance().getParamByName(NavName.LOGIN_VIEW)

2.带返回回调的跳转

 ZRouter.getInstance()        .setParam("携带参数")        .enableCrossPageParamReturn()        .setPopListener((info) => {          console.log('xxx 返回携带的数据：', info.data)        })        .navigation(NavName.LOGIN_VIEW)        // 返回传的参数 ZRouter.getInstance().popToRootWithResult<string>( '我是登录页返回的数据')

4、根视图的用法

  build() {    // 获取NavPathStack实例对象    Navigation(ZRouter.getNavStack()) {    }    .onAppear(() => {      // 跳转到登录页面      ZRouter.getInstance().navigation(NavName.LOGIN_VIEW)    })    .hideTitleBar(true)    .mode(NavigationMode.Stack)    .width(CommonConst.FULL_PARENT)    .height(CommonConst.FULL_PARENT)  }

5、子视图的用法

build() {    NavDestination() {      Column() {        Text(ZRouter.getInstance().getParamByName(NavName.LOGIN_VIEW).toString()).onClick(() => {          ZRouter.getInstance().popToRootWithResult<string>( '我是登录页返回的数据')        })      }    }.width(CommonConst.FULL_PARENT)    .height(CommonConst.FULL_PARENT)  }

6、其它使用方法请查看ZRouter官方文档，后续本篇内容会持续更新更多使用方法。

若本文对您稍有帮助，诚望您不吝点赞，多谢。

有兴趣的同学可以点击查看源码

欢迎一起交流