鸿蒙路由 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或者Stack
Column(){
// 使用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)
}
}
效果图