1. 背景说明
我们创建好默认项目的时候, 可以看到有一个默认的 AppAbility 类, 里面有这样的跳转 page 的代码:
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
即: WindowStage的 loadContent(path: string, callback: AsyncCallback<void>): void;函数.
那么如果我要在 Component 组件里如何跳转 page 呢?
2. router 跳转
在组件内可以使用 router 进行页面跳转, 首先导入:
import { router } from '@kit.ArkUI';
其次是使用函数 pushUrl跳转:
/**
* Navigates to a specified page in the application based on the page URL and parameters.
*
* @param { RouterOptions } options - Options.
* @param { RouterMode } mode - RouterMode.
* @returns { Promise<void> } the promise returned by the function.
* @throws { BusinessError } 401 - if the number of parameters is less than 1 or the type of the url parameter is not string.
* @throws { BusinessError } 100001 - if UI execution context not found.
* @throws { BusinessError } 100002 - if the uri is not exist.
* @throws { BusinessError } 100003 - if the pages are pushed too much.
* @syscap SystemCapability.ArkUI.ArkUI.Full
* @crossplatform
* @atomicservice
* @since 11
*/
function pushUrl(options: RouterOptions, mode: RouterMode): Promise<void>;
其中:
- RouterOptions : 路由跳转选项。
系统能力： SystemCapability.ArkUI.ArkUI.Lite。
| 名称 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | string | 是 | 表示目标页面的url，可以用以下两种格式： - 页面绝对路径，由配置文件中pages列表提供， 例如：- pages/index/index- pages/detail/detail- 特殊值， 如果url的值是"/"，则跳转到首页。 |
| params | object | 否 | 表示路由跳转时要同时传递到目标页面的数据，切换到其他页面时， 当前接收的数据失效。跳转到目标页面后， 使用router.getParams()获取传递的参数， 此外，在类web范式中，参数也可以在页面中直接使用， 如this.keyValue(keyValue为跳转时params参数中的key值)， 如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 **说明：**params参数不能传递方法和系统接口返回的对象 （例如，媒体接口定义和返回的PixelMap对象）。 建议开发者提取系统接口返回的对象中需要被传递的基础类型属性， 自行构造object类型对象进行传递。 |
- RouterMode :路由跳转模式。
系统能力： SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 说明 |
|---|---|
| Standard | 多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶， 无论栈中是否存在相同url的页面。 说明： 不使用路由跳转模式时，则按照默认的多实例模式进行跳转。 |
| Single | 单实例模式。如果目标页面的url已经存在于页面栈中，则该url页面移动到栈顶。 如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。 |
其中 options 的url 可以两种格式:
- 页面绝对路径，由配置文件中pages列表提供，例如：- pages/index/index
- 使用包名指定的路径, 如:
@bundle:net.devwiki.hm4demo/app/ets/pages/WebPage
具体实现代码在: router:
https://git.devwiki.net/Harmony/HM4Demo/src/commit/68a08d785ed13022aad8e3a0ba2bc4d41cb915ee/app/src/main/ets/pages/Index.ets#L40
本文的代码存放在:
Harmony/HM4Demo - HM4Demo - DevWiki Gitea
https://git.devwiki.net/Harmony/HM4Demo
3. 后记
如果你觉得本文对你有帮助, 欢迎点击收藏. 关注我的公众号,获取最新信息.
评论区