1、學習鏈接
HMRouter地址
https://gitee.com/hadss/hmrouter/blob/dev/HMRouterLibrary/README.md
2、工程配置
?下載安裝
ohpm install @hadss/hmrouter添加編譯插件配置
在工程目錄下的build-profile.json5中，配置useNormalizedOHMUrl屬性為true (我這項目創建后默認就是true)
在使用到HMRouter的模塊中引入路由編譯插件，修改hvigorfile.ts。?如果模塊是Har則使用harPlugin(), 模塊是Hsp則使用hspPlugin(), 模塊是Hap則使用hapPlugin()
3、開始使用?
在UIAbility或者啟動框架AppStartup中初始化路由框架
在模塊入口配置一個HMNavigationr容器并添加配置信息
import { HMDefaultGlobalAnimator, HMNavigation } from "@hadss/hmrouter";
import { AttributeUpdater } from "@kit.ArkUI";@Entry
@Component
export struct Index {modifier: MyNavModifier = new MyNavModifier();build() {// @Entry中需要再套一層容器組件,Column或者StackColumn(){// 使用HMNavigation容器HMNavigation({navigationId: 'mainNavigation', homePageUrl: 'MainPage',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);}
}配置信息說明?
創建默認的加載頁面，這里需要注意是創建ArkTS File文件而不是創建Page
import { HMRouter } from "@hadss/hmrouter"@HMRouter({pageUrl: "MainPage"
})
@Component
export struct MainPage {build() {Column(){Text("首頁").fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').height('100%').backgroundColor("#f4f5f9").justifyContent(FlexAlign.Center)}
}?效果圖
