參考文檔：官方文檔

在根目錄oh-package.json5配置

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

加入路由編譯插件

1. hvigor/hvigor-config.json文件

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

2. 工程根目錄的hvigorfile.ts

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

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

這里插件就引入完成了，可正常使用了，其余使用可參考官網文檔
注意??：因為這個插件，預覽器則無法正常使用，需在模擬器查看

這個表示預覽器不兼容