# Class (Router) Provides APIs to access pages through URLs. You can use the APIs to navigate to a specified page in an application, replace the current page with another one in the same application, and return to the previous page or a specified page. > **NOTE** > > - The initial APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. > > - The initial APIs of this class are supported since API version 10. > > - In the following API examples, you must first use [getRouter()](arkts-apis-uicontext-uicontext.md#getrouter) in **UIContext** to obtain a **Router** instance, and then call the APIs using the obtained instance. ## pushUrl pushUrl(options: router.RouterOptions): Promise<void> Navigates to a specified page in the application. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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 Navigates to a specified page in the application. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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> Navigates to a specified page in the application. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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 Navigates to a specified page in the application. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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> Replaces the current page with another one in the application and destroys the current page. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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 Replaces the current page with another one in the application and destroys the current page. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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> Replaces the current page with another one in the application and destroys the current page. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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 Replaces the current page with another one in the application and destroys the current page. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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> Navigates to a page using the named route. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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 Navigates to a page using the named route. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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> Navigates to a page using the named route. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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 Navigates to a page using the named route. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 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. | **Example** ```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> Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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 Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | --------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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> Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| **Return value** | Type | Description | | ------------------- | ------- | | Promise<void> | Promise used to return the result.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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 Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | ---------- | | options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page. | | mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------------- | | 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. | **Example** ```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 Returns to the previous page or a specified page. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | ---------------------------------------- | | options | [router.RouterOptions](js-apis-router.md#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.| **Example** ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); router.back({url:'pages/detail'}); ``` ## back12+ back(index: number, params?: Object): void Returns to the specified page. **Atomic service API**: This API can be used in atomic services since API version 12. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ------------------------------- | ---- | ---------- | | index | number | Yes | Index of the target page to navigate to.
Value range: [0, +∞)| | params | Object | No | Parameters carried when returning to the page.| **Example** ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); router.back(1); ``` ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); router.back(1, {info:'From Home'}); // Returning with parameters. ``` ## clear clear(): void Clears all historical pages in the stack and retains only the current page at the top of the stack. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Example** ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); router.clear(); ``` ## getLength getLength(): string Obtains the number of pages in the current stack. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Return value** | Type | Description | | ------ | ------------------ | | string | Number of pages in the stack. The maximum value is **32**.| **Example** ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); let size = router.getLength(); console.info('pages stack size = ' + size); ``` ## getState getState(): router.RouterState Obtains state information about the current page. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Return value** | Type | Description | | ---------------------------------------- | ------- | | router.[RouterState](js-apis-router.md#routerstate) | Page routing state.| **Example** ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); let page = router.getState(); 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 Obtains the status information about a page by its index. **Atomic service API**: This API can be used in atomic services since API version 12. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ------------------------------- | ---- | ---------- | | index | number | Yes | Index of the target page.
Value range: [0, +∞)| **Return value** | Type | Description | | --------------------------- | ------- | | router.[RouterState](js-apis-router.md#routerstate) \| undefined | State information about the target page. **undefined** if the specified index does not exist.| **Example** ```ts import { Router } from '@kit.ArkUI'; 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 Obtains the status information about a page by its URL. **Atomic service API**: This API can be used in atomic services since API version 12. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ------------------------------- | ---- | ---------- | | url | string | Yes | URL of the target page. | **Return value** | Type | Description | | --------------------------- | ------- | | Array | Page routing state.| **Example** ```ts import { Router } from '@kit.ArkUI'; 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 Enables the display of a confirm dialog box before returning to the previous page. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | --------- | | options | [router.EnableAlertOptions](js-apis-router.md#enablealertoptions) | Yes | Description of the dialog box.| **Error codes** For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Router Error Codes](errorcode-router.md). | ID | Error Message | | ------ | ---------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | | 100001 | Internal error. | **Example** ```ts import { Router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; 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 Disables the display of a confirm dialog box before returning to the previous page. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Example** ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); router.hideAlertBeforeBackPage(); ``` ## getParams getParams(): Object Obtains the parameters passed from the page that initiates redirection to the current page. **Atomic service API**: This API can be used in atomic services since API version 11. **System capability**: SystemCapability.ArkUI.ArkUI.Full **Return value** | Type | Description | | ------ | ----------------- | | Object | Parameters passed from the page that initiates redirection to the current page.| **Example** ```ts import { Router } from '@kit.ArkUI'; let router: Router = uiContext.getRouter(); router.getParams(); ```