@ohos.router (Page Routing) (Not Recommended)

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.

For routing management, it is recommended that you use the Navigation component instead as your application routing framework.

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.

• When the pushUrl or pushNamedRoute API is used with a callback, the information obtained from the callback using APIs such as getLength may represent an intermediate state of the stack. This means that the information might not be consistent with the stack information obtained after all stack operations have been completed.

Modules to Import

import { router } from '@kit.ArkUI';

router.pushUrl⁹⁺

pushUrl(options: RouterOptions): Promise<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

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

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])
})
  .then(() => {
    console.error(`pushUrl finish`);
  })
  .catch((err: ESObject) => {
    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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

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)
  .then(() => {
    console.error(`pushUrl finish`);
  })
  .catch((err: ESObject) => {
    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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

class routerParams {
  data1: string

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

router.replaceUrl({
  url: 'pages/detail',
  params: new routerParams('message')
})
  .then(() => {
    console.error(`replaceUrl finish`);
  })
  .catch((err: ESObject) => {
    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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

class routerParams {
  data1:string

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

router.replaceUrl({
  url: 'pages/detail',
  params: new routerParams('message')
}, router.RouterMode.Standard)
  .then(() => {
    console.error(`replaceUrl finish`);
  })
  .catch((err: ESObject) => {
    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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

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])
})
  .then(() => {
    console.error(`pushNamedRoute finish`);
  })
  .catch((err: ESObject) => {
    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 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

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

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)
  .then(() => {
    console.error(`pushNamedRoute finish`);
  })
  .catch((err: ESObject) => {
    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 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

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

class routerParams {
  data1: string

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

router.replaceNamedRoute({
  name: 'myPage',
  params: new routerParams('message')
})
  .then(() => {
    console.error(`replaceNamedRoute finish`);
  })
  .catch((err: ESObject) => {
    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 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

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

Example

import { BusinessError } from '@kit.BasicServicesKit';

class routerParams {
  data1: string

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

router.replaceNamedRoute({
  name: 'myPage',
  params: new routerParams('message')
}, router.RouterMode.Standard)
  .then(() => {
    console.error(`replaceNamedRoute finish`);
  })
  .catch((err: ESObject) => {
    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 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

Error codes

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

NOTE

The following error codes returned by this API are all of the string type.

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, which deletes all pages between the current page and the target page.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

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

router.back¹²⁺

back(index: number, params?: Object): void;

Returns to the specified page, which deletes all pages between the current page and the target page.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

router.back(1);

router.back(1, { info: 'From Home' }); // Returning with parameters.

router.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

router.clear();

router.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

Example

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

router.getState

getState(): RouterState

Obtains state information about the page at the top of the navigation stack.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

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

router.getStateByIndex¹²⁺

getStateByIndex(index: number): 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

Return value

Example

let options: router.RouterState | undefined = router.getStateByIndex(1);
if (options != undefined) {
  console.log('index = ' + options.index);
  console.log('name = ' + options.name);
  console.log('path = ' + options.path);
  console.log('params = ' + options.params);
}

router.getStateByUrl¹²⁺

getStateByUrl(url: string): Array<RouterState>

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

Return value

Example

let options: Array<router.RouterState> = router.getStateByUrl('pages/index');
for (let i: number = 0; i < options.length; i++) {
  console.log('index = ' + options[i].index);
  console.log('name = ' + options[i].name);
  console.log('path = ' + options[i].path);
  console.log('params = ' + options[i].params);
}

RouterState

Describes the page routing state.

System capability: SystemCapability.ArkUI.ArkUI.Full

router.showAlertBeforeBackPage⁹⁺

showAlertBeforeBackPage(options: 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

Error codes

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

Example

import { BusinessError } from '@kit.BasicServicesKit';

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.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

router.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

router.hideAlertBeforeBackPage();

router.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

Example

router.getParams();

RouterOptions

Describes the page routing options.

System capability: SystemCapability.ArkUI.ArkUI.Lite

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

RouterMode⁹⁺

Enumerates the routing modes.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

NamedRouterOptions¹⁰⁺

Describes the named route options.

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.pushUrl({
      url: 'pages/detail/detail',
      params: {
        data1: 'message'
      }
    });
  }
}

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

TypeScript-based Declarative Development Paradigm

NOTE

Directly using router can lead to ambiguous instance issues. To avoid this, it is recommended that you obtain a UIContext instance using the getUIContext API, and then obtain the router instance bound to the context through the getRouter API.

// Navigate to the target page through router.pushUrl with the params parameter carried.
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit'

// 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])
    }
    // You are advised to use this.getUIContext().getRouter().pushUrl().
    router.pushUrl(options)
      .then(() => {
        console.error(`pushUrl finish`);
      })
      .catch((err: ESObject) => {
        console.error(`pushUrl failed, code is ${(err as BusinessError).code}, message is ${(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 '@kit.ArkUI';

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."
  // You are advised to use this.getUIContext().getRouter().getParams().
  @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

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

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

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();