# Class (Router) 提供通过不同的url访问不同的页面,包括跳转到应用内的指定页面、同应用内的某个页面替换当前页面、返回上一页面或指定的页面等。 > **说明:** > > - 本模块首批接口从API version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > > - 本Class首批接口从API version 10开始支持。 > > - 以下API需先使用UIContext中的[getRouter()](arkts-apis-uicontext-uicontext.md#getrouter)方法获取到Router对象,再通过该对象调用对应方法。 ## pushUrl pushUrl(options: router.RouterOptions): Promise<void> 跳转到应用内的指定页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 跳转页面描述信息。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100002 | Uri error. The URI of the page to redirect is incorrect or does not exist. | | 100003 | Page stack error. Too many pages are pushed. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushUrl({ url: 'pages/routerpage2', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## pushUrl pushUrl(options: router.RouterOptions, callback: AsyncCallback<void>): void 跳转到应用内的指定页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 跳转页面描述信息。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。| **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100002 | Uri error. The URI of the page to redirect is incorrect or does not exist. | | 100003 | Page stack error. Too many pages are pushed. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushUrl({ url: 'pages/routerpage2', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }, (err: Error) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`pushUrl failed, code is ${code}, message is ${message}`); return; } console.info('pushUrl success'); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## pushUrl pushUrl(options: router.RouterOptions, mode: router.RouterMode): Promise<void> 跳转到应用内的指定页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 跳转页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100002 | Uri error. The URI of the page to redirect is incorrect or does not exist. | | 100003 | Page stack error. Too many pages are pushed. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp { Standard: router.RouterMode = router.RouterMode.Standard; } let rtm: RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushUrl({ url: 'pages/routerpage2', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }, rtm.Standard) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## pushUrl pushUrl(options: router.RouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 跳转到应用内的指定页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 跳转页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100002 | Uri error. The URI of the page to redirect is incorrect or does not exist. | | 100003 | Page stack error. Too many pages are pushed. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp { Standard: router.RouterMode = router.RouterMode.Standard; } let rtm: RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushUrl({ url: 'pages/routerpage2', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }, rtm.Standard, (err) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`pushUrl failed, code is ${code}, message is ${message}`); return; } console.info('pushUrl success'); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceUrl replaceUrl(options: router.RouterOptions): Promise<void> 用应用内的某个页面替换当前页面,并销毁被替换的页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 替换页面描述信息。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | The UI execution context is not found. This error code is thrown only in the standard system. | | 200002 | Uri error. The URI of the page to be used for replacement is incorrect or does not exist. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceUrl({ url: 'pages/detail', params: { data1: 'message' } }) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceUrl replaceUrl(options: router.RouterOptions, callback: AsyncCallback<void>): void 用应用内的某个页面替换当前页面,并销毁被替换的页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 替换页面描述信息。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | The UI execution context is not found. This error code is thrown only in the standard system. | | 200002 | Uri error. The URI of the page to be used for replacement is incorrect or does not exist. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceUrl({ url: 'pages/detail', params: { data1: 'message' } }, (err: Error) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`replaceUrl failed, code is ${code}, message is ${message}`); return; } console.info('replaceUrl success'); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceUrl replaceUrl(options: router.RouterOptions, mode: router.RouterMode): Promise<void> 用应用内的某个页面替换当前页面,并销毁被替换的页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 替换页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Failed to get the delegate. This error code is thrown only in the standard system. | | 200002 | Uri error. The URI of the page to be used for replacement is incorrect or does not exist. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp { Standard: router.RouterMode = router.RouterMode.Standard; } let rtm: RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceUrl({ url: 'pages/detail', params: { data1: 'message' } }, rtm.Standard) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceUrl replaceUrl(options: router.RouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 用应用内的某个页面替换当前页面,并销毁被替换的页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 是 | 替换页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | The UI execution context is not found. This error code is thrown only in the standard system. | | 200002 | Uri error. The URI of the page to be used for replacement is incorrect or does not exist. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp { Standard: router.RouterMode = router.RouterMode.Standard; } let rtm: RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceUrl({ url: 'pages/detail', params: { data1: 'message' } }, rtm.Standard, (err: Error) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`replaceUrl failed, code is ${code}, message is ${message}`); return; } console.info('replaceUrl success'); }); } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## pushNamedRoute pushNamedRoute(options: router.NamedRouterOptions): Promise<void> 跳转到指定的命名路由页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 跳转页面描述信息。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100003 | Page stack error. Too many pages are pushed. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushNamedRoute({ name: 'myPage', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## pushNamedRoute pushNamedRoute(options: router.NamedRouterOptions, callback: AsyncCallback<void>): void 跳转到指定的命名路由页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 跳转页面描述信息。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100003 | Page stack error. Too many pages are pushed. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushNamedRoute({ name: 'myPage', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }, (err: Error) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`); return; } console.info('pushNamedRoute success'); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## pushNamedRoute pushNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode): Promise<void> 跳转到指定的命名路由页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 跳转页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100003 | Page stack error. Too many pages are pushed. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp{ Standard:router.RouterMode = router.RouterMode.Standard; } let rtm:RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushNamedRoute({ name: 'myPage', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }, rtm.Standard) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## pushNamedRoute pushNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 跳转到指定的命名路由页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 跳转页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | | 100003 | Page stack error. Too many pages are pushed. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp { Standard: router.RouterMode = router.RouterMode.Standard; } let rtm: RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().pushNamedRoute({ name: 'myPage', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }, rtm.Standard, (err: Error) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`); return; } console.info('pushNamedRoute success'); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceNamedRoute replaceNamedRoute(options: router.NamedRouterOptions): Promise<void> 用指定的命名路由页面替换当前页面,并销毁被替换的页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 替换页面描述信息。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | if the number of parameters is less than 1 or the type of the url parameter is not string. | | 100001 | The UI execution context is not found. This error code is thrown only in the standard system. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceNamedRoute({ name: 'myPage', params: { data1: 'message' } }) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceNamedRoute replaceNamedRoute(options: router.NamedRouterOptions, callback: AsyncCallback<void>): void 用指定的命名路由页面替换当前页面,并销毁被替换的页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 替换页面描述信息。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | The UI execution context is not found. This error code is thrown only in the standard system. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceNamedRoute({ name: 'myPage', params: { data1: 'message' } }, (err: Error) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`replaceNamedRoute failed, code is ${code}, message is ${message}`); return; } console.info('replaceNamedRoute success'); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceNamedRoute replaceNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode): Promise<void> 用指定的命名路由页面替换当前页面,并销毁被替换的页面,使用Promise异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 替换页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | **返回值:** | 类型 | 说明 | | ------------------- | ------- | | Promise<void> | Promise对象。无返回结果的Promise对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Failed to get the delegate. This error code is thrown only in the standard system. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp { Standard: router.RouterMode = router.RouterMode.Standard; } let rtm: RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceNamedRoute({ name: 'myPage', params: { data1: 'message' } }, rtm.Standard) .then(() => { console.info('succeeded'); }) .catch((error: BusinessError) => { console.error(`pushUrl failed, code is ${error.code}, message is ${error.message}`); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## replaceNamedRoute replaceNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 用指定的命名路由页面替换当前页面,并销毁被替换的页面。使用callback异步回调。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | 是 | 替换页面描述信息。 | | mode | [router.RouterMode](js-apis-router.md#routermode9) | 是 | 跳转页面使用的模式。 | | callback | AsyncCallback<void> | 是 | router跳转结果回调函数。
当路由跳转成功时,error为undefined。当路由跳转失败时,error为系统返回的错误对象。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------------- | | 401 | if the number of parameters is less than 1 or the type of the url parameter is not string. | | 100001 | The UI execution context is not found. This error code is thrown only in the standard system. | | 100004 | Named route error. The named route does not exist. | **示例:** ```ts import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; class RouterTmp { Standard: router.RouterMode = router.RouterMode.Standard; } let rtm: RouterTmp = new RouterTmp(); @Entry @Component struct Index { async routePage() { this.getUIContext().getRouter().replaceNamedRoute({ name: 'myPage', params: { data1: 'message' } }, rtm.Standard, (err: Error) => { if (err) { let message = (err as BusinessError).message; let code = (err as BusinessError).code; console.error(`replaceNamedRoute failed, code is ${code}, message is ${message}`); return; } console.info('replaceNamedRoute success'); }) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { this.routePage(); }) } .width('100%') .height('100%') } } ``` ## back back(options?: router.RouterOptions ): void 返回上一页面或指定的页面。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | ---------------------------------------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | 否 | 返回页面描述信息,其中参数url指路由跳转时返回到指定url的页面,如果页面栈中没有对应url的页面,则不响应该操作;如果栈中存在对应url的页面,则返回至index最大的同名页面。
如果url未设置,则返回上一页,页面不会重新构建,页面栈里面的page不会回收,出栈后会被回收。 | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); router.back({url:'pages/detail'}); ``` ## back12+ back(index: number, params?: Object): void 返回指定的页面。 **原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ------------------------------- | ---- | ---------- | | index | number | 是 | 跳转目标页面的索引值。
取值范围:[0, +∞) | | params | Object | 否 | 页面返回时携带的参数。 | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); router.back(1); ``` 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); router.back(1, {info:'来自Home页'}); //携带参数返回 ``` ## clear clear(): void 清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); router.clear(); ``` ## getLength getLength(): string 获取当前在页面栈内的页面数量。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **返回值:** | 类型 | 说明 | | ------ | ------------------ | | string | 页面数量,页面栈支持最大数值是32。 | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); let size = router.getLength(); console.info('pages stack size = ' + size); ``` ## getState getState(): router.RouterState 获取当前页面的状态信息。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **返回值:** | 类型 | 说明 | | ---------------------------------------- | ------- | | router.[RouterState](js-apis-router.md#routerstate) | 页面状态信息。 | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); let page = router.getState(); if (page != undefined) { console.info('current index = ' + page.index); console.info('current name = ' + page.name); console.info('current path = ' + page.path); } ``` ## getStateByIndex12+ getStateByIndex(index: number): router.RouterState | undefined 通过索引值获取对应页面的状态信息。 **原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ------------------------------- | ---- | ---------- | | index | number | 是 | 表示要获取的页面索引。
取值范围:[0, +∞) | **返回值:** | 类型 | 说明 | | --------------------------- | ------- | | router.[RouterState](js-apis-router.md#routerstate) \| undefined | 返回页面状态信息。索引不存在时返回undefined。 | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); let options: router.RouterState | undefined = router.getStateByIndex(1); if (options != undefined) { console.info('index = ' + options.index); console.info('name = ' + options.name); console.info('path = ' + options.path); console.info('params = ' + options.params); } ``` ## getStateByUrl12+ getStateByUrl(url: string): Array 通过url获取当前页面的状态信息。 **原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ------------------------------- | ---- | ---------- | | url | string | 是 | 表示要获取对应页面信息的url。 | **返回值:** | 类型 | 说明 | | --------------------------- | ------- | | Array | 页面状态信息。 | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); let options:Array = router.getStateByUrl('pages/index'); for (let i: number = 0; i < options.length; i++) { console.info('index = ' + options[i].index); console.info('name = ' + options[i].name); console.info('path = ' + options[i].path); console.info('params = ' + options[i].params); } ``` ## showAlertBeforeBackPage showAlertBeforeBackPage(options: router.EnableAlertOptions): void 开启页面返回询问对话框。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.EnableAlertOptions](js-apis-router.md#enablealertoptions) | 是 | 文本弹窗信息描述。 | **错误码:** 以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[页面路由错误码](errorcode-router.md)。 | 错误码ID | 错误信息 | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); try { router.showAlertBeforeBackPage({ message: 'Message Info' }); } catch(error) { let message = (error as BusinessError).message; let code = (error as BusinessError).code; console.error(`showAlertBeforeBackPage failed, code is ${code}, message is ${message}`); } ``` ## hideAlertBeforeBackPage hideAlertBeforeBackPage(): void 禁用页面返回询问对话框。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); router.hideAlertBeforeBackPage(); ``` ## getParams getParams(): Object 获取发起跳转的页面往当前页传入的参数。 **原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full **返回值:** | 类型 | 说明 | | ------ | ----------------- | | Object | 发起跳转的页面往当前页传入的参数。 | **示例:** 完整示例请参考[PushUrl](#pushurl)中的示例。 ```ts import { Router , UIContext } from '@kit.ArkUI'; let uiContext: UIContext = this.getUIContext(); let router: Router = uiContext.getRouter(); router.getParams(); ```