鸿蒙路由管理HMRouter环境配置

目录前言一、安装与配置1. 安装2. 配置插件依赖3. 配置根目录 hvigorfile.ts4. 配置模块级 hvigorfile.ts场景 1模块为 HAP应用入口使用 hapPlugin场景 2模块为 HSP动态特性包使用 hspPlugin场景 3模块为 HAR静态特性包使用 harPlugin如何查看模块类型二、使用步骤1. 初始化与路由入口1.1 初始化1.2 定义路由入口1.3 编写代码总结前言在项目中使用官方推荐的Navigation时需要在所有的页面上都添加一层NavDestination在代码阅读上会增加多个层级而且还要在主页面设置对应名字的跳转等问题配置起来比较繁琐。HMRouter是HarmonyOS上的页面跳转路由框架主要解决应用内原生页面间相互跳转的问题底层封装了Navigation能力让开发者无需关心繁琐的导航逻辑。一、安装与配置1. 安装首先需要在终端中运行以下命令安装 HMRouter 的核心库ohpm install hadss/hmrouter1.2.42. 配置插件依赖打开hvigor/hvigor-config.json5文件在dependencies中添加hadss/hmrouter-plugin插件版本建议与 HMRouter 库保持一致{ modelVersion: 6.0.1, dependencies: { hadss/hmrouter-plugin: ^1.2.4 // 建议使用与库一致的版本 } }注意上面安装的ohpm install hadss/hmrouter1.2.4是在运行时使用hadss/hmrouter-plugin: ^1.2.4是在编译时使用。3. 配置根目录 hvigorfile.ts【只有当入口模块时可以不配置】修改项目根目录的hvigorfile.ts文件需要正确导入并使用appPlugin并传入配置参数import { appTasks } from ohos/hvigor-ohos-plugin; // 注意这里是从 hadss/hmrouter-plugin 导入 appPlugin import { appPlugin } from hadss/hmrouter-plugin; export default { system: appTasks, // 必须传入参数对象否则会报错 plugins: [appPlugin({ ignoreModuleNames: [] })] };特别注意appPlugin在调用时必须传入参数对象如{}或{ ignoreModuleNames: [] }否则构建时会报错。4. 配置模块级 hvigorfile.ts修改你的模块如 entry目录下的hvigorfile.ts文件。根据你的模块类型选择对应的插件场景 1模块为 HAP应用入口使用 hapPluginimport { hapTasks } from ohos/hvigor-ohos-plugin; import { hapPlugin } from hadss/hmrouter-plugin; export default { system: hapTasks, plugins: [hapPlugin()] };场景 2模块为 HSP动态特性包使用 hspPluginimport { hspTasks } from ohos/hvigor-ohos-plugin; import { hspPlugin } from hadss/hmrouter-plugin; export default { system: hspTasks, plugins: [hspPlugin()] };场景 3模块为 HAR静态特性包使用 harPluginimport { harTasks } from ohos/hvigor-ohos-plugin; import { harPlugin } from hadss/hmrouter-plugin; export default { system: harTasks, plugins: [harPlugin()] };如何查看模块类型打开模块的build-profile.json5文件查看type字段{ apiType: stageMode, buildOption: { }, targets: [ { name: default } ] }注意如果build-profile.json5中没有显式指定type默认是hap类型。二、使用步骤1. 初始化与路由入口1.1 初始化在 EntryAbility 里的onCreate进行初始化HMRouterMgr.init({context: this.context}) // 初始化 HMRouter1.2 定义路由入口自定义一个NavModifier类继承AttributeUpdaterNavigationAttribute// 自定义 Navigation 属性用于隐藏标题栏等 export class NavModifier extends AttributeUpdaterNavigationAttribute { initializeModifier(instance: NavigationAttribute): void { // Stack堆栈页面多页面层级跳转, Split分栏导航平板大屏左右分栏 instance.mode(NavigationMode.Stack); // 导航栏宽度铺满屏幕 instance.navBarWidth(100%); // 隐藏顶部标题栏 instance.hideTitleBar(true); // 隐藏底部工具栏 instance.hideToolBar(true); } }navigationId是 HMRouter 的导航容器标识符区分不同的导航容器告诉HMRouterMgr.push()往哪个容器里跳转不同navigationId是不同的页面栈互不影响。1.3 编写代码Column() { // 使用 HMNavigation 容器 HMNavigation({ navigationId: mainNavigation, // homePageUrl: MainPage, // 首页路由地址可选不传则显示 children 内容 options: { standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR, // 页面转场动画 dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR, // 弹窗转场动画 modifier: this.modifier // 容器样式修饰 } }) { Column({space: 20}) { Button(TwoPage) .width(80%) .onClick(() { HMRouterMgr.push({ navigationId: mainNavigation, pageUrl: TwoPage }) }) } } }HMNavigation({})后面包含的Column是一个children是默认显示的内容。不传homePageUrl时它充当首页如果pageUrl没有指定跳转的页面就会跳转到这个子页面。总结HMRouter 通过封装 HarmonyOS 原生的 Navigation 能力简化了页面路由的配置和使用流程。开发者无需在每个页面手动添加 NavDestination也无需在主页面维护复杂的跳转逻辑只需简单的初始化、配置和调用即可实现页面间的灵活跳转有效提升了开发效率和代码可读性。