当前位置：首页 > news >正文

HarmonyOs @hadss/hmrouter路由接入

news 来源：原创 2025/4/26 10:24:04

参考文档：官方文档

在根目录oh-package.json5配置

{"dependencies": {"@hadss/hmrouter": "^1.0.0-rc.11"}
}

加入路由编译插件

hvigor/hvigor-config.json文件

{"dependencies": {"@hadss/hmrouter-plugin": "^1.0.0-rc.11"// 使用npm仓版本号},// ...其余配置
}

import { appTasks } from '@ohos/hvigor-ohos-plugin';
export default {system: appTasks,plugins:[]
}

entry模块的hvigorfile.ts

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { hapPlugin } from '@hadss/hmrouter-plugin';export default {system: hapTasks,plugins: [hapPlugin()] // 使用HMRouter标签的模块均需要配置，与模块类型保持一致
}

工程配置

build-profile.json5

{"app": {"products": [{"name": "default","signingConfig": "default","compatibleSdkVersion": "5.0.0(12)","runtimeOS": "HarmonyOS","buildOption": {"strictMode": {"useNormalizedOHMUrl": true  // 重点这个设置为true}}}],// ...其余配置}
}

初始化路由框架

大致位置可通过windowStage.loadContent来查找，具体怎么找启动页面可参考上篇文章

// PhoneAbility.ets
export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {HMRouterMgr.init({context: this.context})}
}

定义路由入口

// Index.ets
import { HMDefaultGlobalAnimator, HMNavigation } from "@hadss/hmrouter";
import { AttributeUpdater } from "@kit.ArkUI";@Entry
@Component
struct Index {modifier: MyNavModifier = new MyNavModifier();build() {// @Entry中需要再套一层容器组件,Column或者StackColumn(){// 使用HMNavigation容器HMNavigation({navigationId: 'mainNavigation', homePageUrl: 'YDMainPage',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);}
}

路由定义

import { HMRouter } from "@hadss/hmrouter"
// 通过@HMRouter来定义路由，无需在main_pages.json中定义
@HMRouter({pageUrl: "MainPage"
})
@Component
export struct MainPage {build() {Column(){Text("首页").fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').height('100%').backgroundColor("#f4f5f9").justifyContent(FlexAlign.Center)}
}