鸿蒙应用开发之路由管理-使用三方库HMRouter实现路由跳转

czhdawn • 2025年7月23日 21:10 • 计算机技术与应用 • 阅读 318

Table of Contents

安装依赖

ohpm install @hadss/hmrouter
ohpm install @hadss/hmrouter-transitions

检查在工程根目录下的 oh-package.json5 可以找到该依赖配置项

配置编译插件

修改工程根目录下的 hvigor/hvigor-config.json 文件，加入路由编译插件

{ "dependencies": { "@hadss/hmrouter-plugin": "^1.2.0-beta.0" }

修改工程根目录下的 hvigorfile.ts 使用路由编译插件

import { appTasks } from '@ohos/hvigor-ohos-plugin';
import { appPlugin } from "@hadss/hmrouter-plugin";

export default {
  system: appTasks,
  plugins: [appPlugin({ ignoreModuleNames: [ /** 不需要扫描的模块 **/ ] })]
};

初始化路由框架

在 UIAbility 中初始化路由框架

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 日志开启需在init之前调用，否则会丢失初始化日志
    HMRouterMgr.openLog("INFO")
    HMRouterMgr.init({
      context: this.context
    })
  }
}

找到工程入口 Enrty 下的 EntryAbility.ets 添加配置

定义路由入口

需要在页面中定义一个 HMNavigation 容器，并设置相关参数

@Entry
@Component
export struct Index {
  modifier: MyNavModifier = new MyNavModifier();

  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column(){
      // 使用HMNavigation容器
      HMNavigation({
        navigationId: 'MainNavigation', homePageUrl: 'HomePage',
        options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

class MyNavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.hideNavBar(true);
  }
}