鸿蒙路由 HMrouter 配置及使用一

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)}
}

效果图