ZRouter简介：是一款轻量级的动态路由框架，基于Navigation系统路由表和Hvigor插件实现的方案，可以解决多个业务模块（HAR/HSP）之间解耦和通信问题，从而实现业务复用和功能扩展。
ZRouter出处ZRouter；
非常感谢大佬出的库，方便我们开发,提高我们开发效率，更详细的介绍和使用请看官方出处。
其它
Navigation官网
ZRouter的配置
- 在Dev工具里选择Terminal,通过ohpm工具下载安装库：
点击查看最新版本
ohpm install @hzw/zrouter
2. 安装router-register-plugin插件：
点击查看最新版本2.1. 在项目根目录的hvigor目录的hvigor-config.json5文件中配置安装
// 远程依赖
"router-register-plugin":"1.1.1"
2.2. 初始配置，在每个模块中的hvigorfile.ts文件导入router-register-plugin插件模块，如下：
- 导入方式唯一不同在于system：产品定制层是hapTasks ，基础特性层是harTasks 。
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忽略掉这两个文件。
_generated
route_map.jsonZRouter的基本使用
1、 在EntryAbility的onCreate()方法中初始化ZRouter
// 如果项目中存在hsp模块则传入true
ZRouter.initialize((config) => {
config.isLoggingEnabled = BuildProfile.DEBUG
config.isHSPModuleDependent = false
})2、在Index页面使用Navigation作为根视图
2.1、 为啥要在Index页面使用Navigation，直接启动页不行吗
如果从启动页使用Navigation，启动页跳转到登录页或主页就要销毁，那么Navigation是要长期存在的，所以目前只能在Navigation作为根视图使用
2.2、在Index页，在什么时机下使用呢
如果在生命周期aboutToAppear()跳转启动页，ZRouter.getNavStack()是在build里获取NavPathStack实例对象的，那我们都知道aboutToAppear是在build之前执行的。Navigation作为路由容器，其生命周期承载在NavDestination组件上，所以在onAppear()跳转是最好的。
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官方文档，后续本篇内容会持续更新更多使用方法。
- 以往系列文章
- 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 模块化基础篇》
- 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建基础特性层》
- 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建公共能力层》
- 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— Tabs底部导航栏》
若本文对您稍有帮助
