《探索 HarmonyOS NEXT (5.0)：开启构建模块化项目架构奇幻之旅 —— 动态 ...

ZRouter简介：是一款轻量级的动态路由框架，基于Navigation系统路由表和Hvigor插件实现的方案，可以解决多个业务模块（HAR/HSP）之间解耦和通讯问题，从而实现业务复用和功能扩展。
ZRouter出处ZRouter；
非常感谢大佬出的库，方便我们开发,提高我们开发效率，更详细的介绍和利用请看官方出处。
别的
Navigation官网
ZRouter的配置

• 在Dev工具里选择Terminal,通过ohpm工具下载安装库：
  点击查看最新版本
  

1. ohpm install @hzw/zrouter

复制代码

2. 安装router-register-plugin插件：
点击查看最新版本
2.1. 在项目根目次的hvigor目次的hvigor-config.json5文件中配置安装

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

复制代码

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

• 导入方式唯一不同在于system：产物定制层是hapTasks ，根本特性层是harTasks 。
  

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

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

复制代码

2.2.2：根本特性层 导入方式：

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

复制代码

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

1. _generated
2. route_map.json

复制代码

ZRouter的根本利用

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

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

复制代码

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

1.       // 跳转到登录页面
2.       ZRouter.getInstance().navigation(NavName.LOGIN_VIEW)
3.       // 携带参数跳转
4.       ZRouter.getInstance()
5.         .setParam("携带参数")
6.         .navigation(NavName.LOGIN_VIEW)
8.    // 获取参数
9.    ZRouter.getInstance().getParamByName(NavName.LOGIN_VIEW)

复制代码

2.带返回回调的跳转

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

复制代码

4、根视图的用法

1.   build() {
2.     // 获取NavPathStack实例对象
3.     Navigation(ZRouter.getNavStack()) {
4.     }
5.     .onAppear(() => {
6.       // 跳转到登录页面
7.       ZRouter.getInstance().navigation(NavName.LOGIN_VIEW)
8.     })
9.     .hideTitleBar(true)
10.     .mode(NavigationMode.Stack)
11.     .width(CommonConst.FULL_PARENT)
12.     .height(CommonConst.FULL_PARENT)
14.   }

复制代码

5、子视图的用法

1. build() {
2.     NavDestination() {
3.       Column() {
4.         Text(ZRouter.getInstance().getParamByName(NavName.LOGIN_VIEW).toString()).onClick(() => {
6.           ZRouter.getInstance().popToRootWithResult<string>( '我是登录页返回的数据')
7.         })
8.       }
9.     }.width(CommonConst.FULL_PARENT)
10.     .height(CommonConst.FULL_PARENT)
12.   }

复制代码

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

• 以往系列文章
  

• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 模块化根本篇》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建根本特性层》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建公共本事层》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— Tabs底部导航栏》
  

若本文对您稍有帮助，诚望您不吝点赞，多谢。
有爱好的同砚可以点击查看源码

• gitee：https://gitee.com/jiaojiaoone/explore-harmony-next.git
  
• github：https://github.com/JasonYinH/ExploreHarmonyNext.git
  

欢迎加我微信一起交流：+V：yinshiyuba


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。