@ohos.router (Page Routing)

The Router module 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 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.

Page routing APIs can be invoked only after page rendering is complete. Do not call these APIs in onInit and onReady when the page is still in the rendering phase.

The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see UIContext.

Since API version 10, you can use the getRouter API in UIContext to obtain the Router object associated with the current UI context.

To achieve a better transition effect, you are advised to use the <Navigation> component and modal transition.

Modules to Import

import router from '@ohos.router'

router.pushUrl⁹⁺

pushUrl(options: RouterOptions): Promise<void>

Navigates to a specified page in the application.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	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 Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100002	if the uri is not exist.
100003	if the pages are pushed too much.

Example

import { BusinessError } from '@ohos.base';

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

try {
  router.pushUrl({
    url: 'pages/routerpage2',
    params: new routerParams('message' ,[123,456,789])
  })
} catch (err) {
  console.error(`pushUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

router.pushUrl⁹⁺

pushUrl(options: RouterOptions, callback: AsyncCallback<void>): void

Navigates to a specified page in the application.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	RouterOptions	Yes	Page routing parameters.
callback	AsyncCallback<void>	Yes	Callback used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100002	if the uri is not exist.
100003	if the pages are pushed too much.

Example

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

router.pushUrl({
  url: 'pages/routerpage2',
  params: new routerParams('message' ,[123,456,789])
}, (err) => {
  if (err) {
    console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('pushUrl success');
})

router.pushUrl⁹⁺

pushUrl(options: RouterOptions, mode: RouterMode): Promise<void>

Navigates to a specified page in the application.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	RouterOptions	Yes	Page routing parameters.
mode	RouterMode	Yes	Routing mode.

Return value

Type	Description
Promise<void>	Promise used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100002	if the uri is not exist.
100003	if the pages are pushed too much.

Example

import { BusinessError } from '@ohos.base';

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

try {
  router.pushUrl({
    url: 'pages/routerpage2',
    params: new routerParams('message' ,[123,456,789])
  }, router.RouterMode.Standard)
} catch (err) {
  console.error(`pushUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

router.pushUrl⁹⁺

pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback<void>): void

Navigates to a specified page in the application.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	RouterOptions	Yes	Page routing parameters.
mode	RouterMode	Yes	Routing mode.
callback	AsyncCallback<void>	Yes	Callback used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100002	if the uri is not exist.
100003	if the pages are pushed too much.

Example

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

router.pushUrl({
  url: 'pages/routerpage2',
  params: new routerParams('message' ,[123,456,789])
}, router.RouterMode.Standard, (err) => {
  if (err) {
    console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('pushUrl success');
})

router.replaceUrl⁹⁺

replaceUrl(options: RouterOptions): Promise<void>

Replaces the current page with another one in the application and destroys the current page. This API cannot be used to configure page transition effects. To configure page transition effects, use the <Navigation> component.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Name	Type	Mandatory	Description
options	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 Router Error Codes.

ID	Error Message
100001	if UI execution context not found, only throw in standard system.
200002	if the uri is not exist.

Example

import { BusinessError } from '@ohos.base';

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

try {
  router.replaceUrl({
    url: 'pages/detail',
    params: new routerParams('message')
  })
} catch (err) {
  console.error(`replaceUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

router.replaceUrl⁹⁺

replaceUrl(options: RouterOptions, callback: AsyncCallback<void>): void

Replaces the current page with another one in the application and destroys the current page.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Name	Type	Mandatory	Description
options	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 Router Error Codes.

ID	Error Message
100001	if UI execution context not found, only throw in standard system.
200002	if the uri is not exist.

Example

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

router.replaceUrl({
  url: 'pages/detail',
  params: new routerParams('message')
}, (err) => {
  if (err) {
    console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('replaceUrl success');
})

router.replaceUrl⁹⁺

replaceUrl(options: RouterOptions, mode: RouterMode): Promise<void>

Replaces the current page with another one in the application and destroys the current page.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Name	Type	Mandatory	Description
options	RouterOptions	Yes	Description of the new page.
mode	RouterMode	Yes	Routing mode.

Return value

Type	Description
Promise<void>	Promise used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if can not get the delegate, only throw in standard system.
200002	if the uri is not exist.

Example

import { BusinessError } from '@ohos.base';

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

try {
  router.replaceUrl({
    url: 'pages/detail',
    params: new routerParams('message')
  }, router.RouterMode.Standard)
} catch (err) {
  console.error(`replaceUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

router.replaceUrl⁹⁺

replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback<void>): void

Replaces the current page with another one in the application and destroys the current page.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Name	Type	Mandatory	Description
options	RouterOptions	Yes	Description of the new page.
mode	RouterMode	Yes	Routing mode.
callback	AsyncCallback<void>	Yes	Callback used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found, only throw in standard system.
200002	if the uri is not exist.

Example

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

router.replaceUrl({
  url: 'pages/detail',
  params: new routerParams('message')
}, router.RouterMode.Standard, (err) => {
  if (err) {
    console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('replaceUrl success');
});

router.pushNamedRoute¹⁰⁺

pushNamedRoute(options: NamedRouterOptions): Promise<void>

Navigates to a page using the named route. This API uses a promise to return the result.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	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 Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100003	if the pages are pushed too much.
100004	if the named route is not exist.

Example

import { BusinessError } from '@ohos.base';

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

try {
  router.pushNamedRoute({
    name: 'myPage',
    params: new routerParams('message' ,[123,456,789])
  })
} catch (err) {
  console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

For details, see UI Development-Named Route.

router.pushNamedRoute¹⁰⁺

pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback<void>): void

Navigates to a page using the named route. This API uses an asynchronous callback to return the result.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	Yes	Page routing parameters.
callback	AsyncCallback<void>	Yes	Callback used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100003	if the pages are pushed too much.
100004	if the named route is not exist.

Example

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

router.pushNamedRoute({
  name: 'myPage',
  params: new routerParams('message' ,[123,456,789])
}, (err) => {
  if (err) {
    console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('pushNamedRoute success');
})

router.pushNamedRoute¹⁰⁺

pushNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise<void>

Navigates to a page using the named route. This API uses a promise to return the result.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	Yes	Page routing parameters.
mode	RouterMode	Yes	Routing mode.

Return value

Type	Description
Promise<void>	Promise used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100003	if the pages are pushed too much.
100004	if the named route is not exist.

Example

import { BusinessError } from '@ohos.base';

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

try {
  router.pushNamedRoute({
    name: 'myPage',
    params: new routerParams('message' ,[123,456,789])
  }, router.RouterMode.Standard)
} catch (err) {
  console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

router.pushNamedRoute¹⁰⁺

pushNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: AsyncCallback<void>): void

Navigates to a page using the named route. This API uses an asynchronous callback to return the result.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	Yes	Page routing parameters.
mode	RouterMode	Yes	Routing mode.
callback	AsyncCallback<void>	Yes	Callback used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found.
100003	if the pages are pushed too much.
100004	if the named route is not exist.

Example

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

router.pushNamedRoute({
  name: 'myPage',
  params: new routerParams('message' ,[123,456,789])
}, router.RouterMode.Standard, (err) => {
  if (err) {
    console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('pushNamedRoute success');
})

router.replaceNamedRoute¹⁰⁺

replaceNamedRoute(options: 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.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	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 Router Error Codes.

ID	Error Message
100001	if UI execution context not found, only throw in standard system.
100004	if the named route is not exist.

Example

import { BusinessError } from '@ohos.base';

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

try {
  router.replaceNamedRoute({
    name: 'myPage',
    params: new routerParams('message')
  })
} catch (err) {
  console.error(`replaceNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

router.replaceNamedRoute¹⁰⁺

replaceNamedRoute(options: NamedRouterOptions, callback: AsyncCallback<void>): void

Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	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 Router Error Codes.

ID	Error Message
100001	if UI execution context not found, only throw in standard system.
100004	if the named route is not exist.

Example

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

router.replaceNamedRoute({
  name: 'myPage',
  params: new routerParams('message')
}, (err) => {
  if (err) {
    console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('replaceNamedRoute success');
})

router.replaceNamedRoute¹⁰⁺

replaceNamedRoute(options: NamedRouterOptions, mode: 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.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	Yes	Description of the new page.
mode	RouterMode	Yes	Routing mode.

Return value

Type	Description
Promise<void>	Promise used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if can not get the delegate, only throw in standard system.
100004	if the named route is not exist.

Example

import { BusinessError } from '@ohos.base';

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

try {
  router.replaceNamedRoute({
    name: 'myPage',
    params: new routerParams('message')
  }, router.RouterMode.Standard)
} catch (err) {
  console.error(`replaceNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

router.replaceNamedRoute¹⁰⁺

replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: AsyncCallback<void>): void

Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	NamedRouterOptions	Yes	Description of the new page.
mode	RouterMode	Yes	Routing mode.
callback	AsyncCallback<void>	Yes	Callback used to return the result.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found, only throw in standard system.
100004	if the named route is not exist.

Example

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

router.replaceNamedRoute({
  name: 'myPage',
  params: new routerParams('message')
}, router.RouterMode.Standard, (err) => {
  if (err) {
    console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('replaceNamedRoute success');
});

router.back

back(options?: RouterOptions ): void

Returns to the previous page or a specified page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	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

router.back({url:'pages/detail'});

router.clear

clear(): void

Clears all historical pages in the stack and retains only the current page at the top of the stack.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

router.clear();

router.getLength

getLength(): string

Obtains the number of pages in the current stack.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
string	Number of pages in the stack. The maximum value is 32.

Example

let size = router.getLength();        
console.log('pages stack size = ' + size);

router.getState

getState(): RouterState

Obtains state information about the current page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
RouterState	Page routing state.

Example

let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);

RouterState

Describes the page routing state.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
index	number	Yes	Index of the current page in the stack. The index starts from 1 from the bottom to the top of the stack.
name	string	No	Name of the current page, that is, the file name.
path	string	Yes	Path of the current page.

router.showAlertBeforeBackPage⁹⁺

showAlertBeforeBackPage(options: EnableAlertOptions): void

Enables the display of a confirm dialog box before returning to the previous page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	EnableAlertOptions	Yes	Description of the dialog box.

Error codes

For details about the error codes, see Router Error Codes.

ID	Error Message
100001	if UI execution context not found.

Example

import { BusinessError } from '@ohos.base';

try {
  router.showAlertBeforeBackPage({
    message: 'Message Info'
  });
} catch(err) {
  console.error(`showAlertBeforeBackPage failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}

EnableAlertOptions

Describes the confirm dialog box.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
message	string	Yes	Content displayed in the confirm dialog box.

router.hideAlertBeforeBackPage⁹⁺

hideAlertBeforeBackPage(): void

Disables the display of a confirm dialog box before returning to the previous page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

router.hideAlertBeforeBackPage();

router.getParams

getParams(): Object

Obtains the parameters passed from the page that initiates redirection to the current page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
object	Parameters passed from the page that initiates redirection to the current page.

Example

router.getParams();

RouterOptions

Describes the page routing options.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Name	Type	Mandatory	Description
url	string	Yes	URL of the target page, in either of the following formats: - Absolute path of the page. The value is available in the pages list in the config.json file, for example: - pages/index/index - pages/detail/detail - Particular path. If the URL is a slash (/), the home page is displayed.
params	object	No	Data that needs to be passed to the target page during redirection. The received data becomes invalid when the page is switched to another page. The target page can use router.getParams() to obtain the passed parameters, for example, this.keyValue (keyValue is the value of a key in params). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by key already exists on the target page, the passed value of the key will be displayed. NOTE The params parameter cannot pass objects returned by methods and system APIs, for example, PixelMap objects defined and returned by media APIs. To pass such objects, extract from them the basic type attributes to be passed, and then construct objects of the object type.

NOTE The page routing stack supports a maximum of 32 pages.

RouterMode⁹⁺

Enumerates the routing modes.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Description
Standard	Multi-instance mode. It is the default routing mode. The target page is added to the top of the page stack, regardless of whether a page with the same URL exists in the stack. NOTE If the routing mode is not used, the page is redirected to in multi-instance mode.
Single	Singleton mode. If the URL of the target page already exists in the page stack, the page closest to the top of the stack is moved to the top and becomes a new page. If the URL of the target page does not exist in the page stack, the page is redirected to in multi-instance mode.

NamedRouterOptions¹⁰⁺

Describes the named route options.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
name	string	Yes	Name of the target named route.
params	object	No	Data that needs to be passed to the target page during redirection. The target page can use router.getParams() to obtain the passed parameters, for example, this.keyValue (keyValue is the value of a key in params). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by key already exists on the target page, the passed value of the key will be displayed.

Examples

JavaScript-based Web-like Development Paradigm

The following sample code applies only to JavaScript files, not ArkTS files.

// Current page
export default {
  pushPage() {
    router.push({
      url: 'pages/detail/detail',
      params: {
        data1: 'message'
      }
    });
  }
}

// detail page
export default {
  onInit() {
    console.info('showData1:' + router.getParams()['data1']);
  }
}

TypeScript-based Declarative Development Paradigm

// Navigate to the target page through router.pushUrl with the params parameter carried.
import router from '@ohos.router'
import { BusinessError } from '@ohos.base'

// Define the class for passing parameters.
class innerParams {
  array:number[]

  constructor(tuple:number[]) {
    this.array = tuple
  }
}

class routerParams {
  text:string
  data:innerParams

  constructor(str:string, tuple:number[]) {
    this.text = str
    this.data = new innerParams(tuple)
  }
}

@Entry
@Component
struct Index {
  async routePage() {
    let options:router.RouterOptions = {
      url: 'pages/second',
      params: new routerParams ('This is the value on the first page', [12, 45, 78])
    }
    try {
      await router.pushUrl(options)
    } catch (err) {
      console.info(` fail callback, code: ${(err as BusinessError).code}, msg: ${(err as BusinessError).message}`)
    }
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('This is the first page.')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button() {
        Text('next page')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }.type(ButtonType.Capsule)
      .margin({ top: 20 })
      .backgroundColor('#ccc')
      .onClick(() => {
        this.routePage()
      })
    }
    .width('100%')
    .height('100%')
  }
}

// Receive the transferred parameters on the second page.
import router from '@ohos.router'

class innerParams {
  array:number[]

  constructor(tuple:number[]) {
    this.array = tuple
  }
}

class routerParams {
  text:string
  data:innerParams

  constructor(str:string, tuple:number[]) {
    this.text = str
    this.data = new innerParams(tuple)
  }
}

@Entry
@Component
struct Second {
  private content: string = "This is the second page."
  @State text: string = (router.getParams() as routerParams).text
  @State data: object = (router.getParams() as routerParams).data
  @State secondData: string = ''

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text(`${this.content}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text(this.text)
        .fontSize(30)
        .onClick(() => {
          this.secondData = (this.data['array'][1]).toString()
        })
        .margin({ top: 20 })
      Text(`This is the data passed from the first page: ${this.secondData}`)
        .fontSize(20)
        .margin({ top: 20 })
        .backgroundColor('red')
    }
    .width('100%')
    .height('100%')
  }
}

router.push^(deprecated)

push(options: RouterOptions): void

Navigates to a specified page in the application.

This API is deprecated since API version 9. You are advised to use pushUrl⁹⁺ instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	RouterOptions	Yes	Page routing parameters.

Example

class innerParams {
  data3:number[]

  constructor(tuple:number[]) {
    this.data3 = tuple
  }
}

class routerParams {
  data1:string
  data2:innerParams

  constructor(str:string, tuple:number[]) {
    this.data1 = str
    this.data2 = new innerParams(tuple)
  }
}

router.push({
  url: 'pages/routerpage2',
  params: new routerParams('message' ,[123,456,789])
});

router.replace^(deprecated)

replace(options: RouterOptions): void

Replaces the current page with another one in the application and destroys the current page.

This API is deprecated since API version 9. You are advised to use replaceUrl⁹⁺ instead.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Name	Type	Mandatory	Description
options	RouterOptions	Yes	Description of the new page.

Example

class routerParams {
  data1:string

  constructor(str:string) {
    this.data1 = str
  }
}

router.replace({
  url: 'pages/detail',
  params: new routerParams('message')
});

router.enableAlertBeforeBackPage^(deprecated)

enableAlertBeforeBackPage(options: EnableAlertOptions): void

Enables the display of a confirm dialog box before returning to the previous page.

This API is deprecated since API version 9. You are advised to use showAlertBeforeBackPage⁹⁺ instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	EnableAlertOptions	Yes	Description of the dialog box.

Example

router.enableAlertBeforeBackPage({
  message: 'Message Info'
});

router.disableAlertBeforeBackPage^(deprecated)

disableAlertBeforeBackPage(): void

Disables the display of a confirm dialog box before returning to the previous page.

This API is deprecated since API version 9. You are advised to use hideAlertBeforeBackPage⁹⁺ instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

router.disableAlertBeforeBackPage();

@ohos.router (Page Routing)

Modules to Import

router.pushUrl9+

router.pushUrl9+

router.pushUrl9+

router.pushUrl9+

router.replaceUrl9+

router.replaceUrl9+

router.replaceUrl9+

router.replaceUrl9+

router.pushNamedRoute10+

router.pushNamedRoute10+

router.pushNamedRoute10+

router.pushNamedRoute10+

router.replaceNamedRoute10+

router.replaceNamedRoute10+

router.replaceNamedRoute10+

router.replaceNamedRoute10+

router.back

router.clear

router.getLength

router.getState

RouterState

router.showAlertBeforeBackPage9+

EnableAlertOptions

router.hideAlertBeforeBackPage9+

router.getParams

RouterOptions

RouterMode9+

NamedRouterOptions10+

Examples

JavaScript-based Web-like Development Paradigm

TypeScript-based Declarative Development Paradigm

router.push(deprecated)

router.replace(deprecated)

router.enableAlertBeforeBackPage(deprecated)

router.disableAlertBeforeBackPage(deprecated)

router.pushUrl⁹⁺

router.pushUrl⁹⁺

router.pushUrl⁹⁺

router.pushUrl⁹⁺

router.replaceUrl⁹⁺

router.replaceUrl⁹⁺

router.replaceUrl⁹⁺

router.replaceUrl⁹⁺

router.pushNamedRoute¹⁰⁺

router.pushNamedRoute¹⁰⁺

router.pushNamedRoute¹⁰⁺

router.pushNamedRoute¹⁰⁺

router.replaceNamedRoute¹⁰⁺

router.replaceNamedRoute¹⁰⁺

router.replaceNamedRoute¹⁰⁺

router.replaceNamedRoute¹⁰⁺

router.showAlertBeforeBackPage⁹⁺

router.hideAlertBeforeBackPage⁹⁺

RouterMode⁹⁺

NamedRouterOptions¹⁰⁺

router.push^(deprecated)

router.replace^(deprecated)

router.enableAlertBeforeBackPage^(deprecated)

router.disableAlertBeforeBackPage^(deprecated)