【HarmonyOS 4.0】@ohos.router 页面路由

1. 注册页面，在src/main/resources/base/profile/main_pages.json文件新增配置。

{
 "src": [
   "pages/Index",
   "pages/AnimateTo"
 ]
}

2. 导入 router 模块

import router from '@ohos.router'

1. router.pushUrl

1. 跳转到应用内的指定页面
2. 会将当前页面压入历史页面栈，因此使用该方法跳转到目标页面之后，还可以再返回。
3. router.pushUrl(options: RouterOptions^1^): Promise
4. router.pushUrl(options: RouterOptions, mode: RouterMode^2^): Promise

2. router.replaceUrl

1. 用应用内的某个页面替换当前页面，并销毁被替换的页面。不支持设置页面转场动效，如需设置，推荐使用Navigation组件。
2. 会直接销毁当前页面并释放资源，用目标页替换当前页，因此使用该方法跳转到目标页面之后，不能返回。
3. router.replaceUrl(options: RouterOptions^1^): Promise
4. router.replaceUrl(options: RouterOptions, mode: RouterMode^2^): Promise

3. router.back

1. 返回上一页面或指定的页面。
2. 若上一个页面如果是 router.replaceUrl() 跳转到当前页面的，则 router.back() 不能返回。
3. 若指定的页面不在历史页面栈中，也就是用户并未浏览过指定页面，那么将无法回到指定页面。
4. router.back(options?: RouterOptions^1^ ): void

4. router.getParams

1. 获取发起跳转的页面往当前页传入的参数。
2. router.getParams(): Object

onPageShow(): void { // 页面每次显示时触发。使用 aboutToAppear 页面没反应。
  let record = router.getParams() as Record<string, string>
  if (record) {
    this.id = record['id']
  }
}

5. router.clear

1. 清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
2. router.clear(): void

6. router.getLength

1. 获取当前在页面栈内的页面数量。
2. router.getLength(): string

7. router.getState

1. 获取当前页面的状态信息。
2. router.getState(): RouterState^3^

8. router.showAlertBeforeBackPage

1. 开启页面返回询问对话框。
2. router.showAlertBeforeBackPage(options: EnableAlertOptions^4^): void

9. router.hideAlertBeforeBackPage

1. 禁用页面返回询问对话框。
2. router.hideAlertBeforeBackPage(): void

---

1. RouterOptions 路由跳转选项。

   { url: string, params?: object } ↩︎ ↩︎ ↩︎

2. RouterMode 路由跳转模式。

   2.1 router.RouterMode.Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。

   2.2 router.RouterMode.Single：单实例模式。如果目标页面的url已经存在于页面栈中，则该url页面移动到栈顶。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。 ↩︎ ↩︎

3. RouterState 页面状态信息。

   3.1 index: number：表示当前页面在页面栈中的索引。从栈底到栈顶，index从1开始递增。

   3.2 name: string：表示当前页面的名称，即对应文件名。

   3.3 path: string：表示当前页面的路径。 ↩︎

4. EnableAlertOptions 页面返回询问对话框选项。

   { message: string } 询问对话框内容 ↩︎