@system.router (Page Routing)

The Router module provides APIs to access pages through URIs.

NOTE

• The APIs of this module are no longer maintained since API version 8. You are advised to use @ohos.router instead.

• The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.

Modules to Import

import router from '@system.router';

router.push

push(options: RouterOptions): void

Navigates to a specified page in the application.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

// Current page
import router from '@system.router';
class A{
  pushPage() {
    router.push({
      uri: 'pages/routerpage2/routerpage2',
      params: {
        data1: 'message',
        data2: {
          data3: [123, 456, 789]
        }
      }
    });
  }
}
export default new A()

// routerpage2 page
class B{
  data:Record<string,string> = {'data1': 'default'}
  data2:Record<string,number[]> = {'data3': [1, 2, 3]}
  onInit() {
    console.info('showData1:' + this.data.data1);
    console.info('showData3:' + this.data2.data3);
  }
}
export default new B()

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

router.replace

replace(options: RouterOptions): void

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

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Example

// Current page
import router from '@system.router';
class C{
  replacePage() {
    router.replace({
      uri: 'pages/detail/detail',
      params: {
        data1: 'message'
      }
    });
  }
}
export default new C()

// detail page
class Area {
  data:Record<string,string> = {'data1': 'default'}
  onInit() {
    console.info('showData1:' + this.data)
  }
}
export default new Area()

router.back

back(options?: BackRouterOptions): void

Returns to the previous page or a specified page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

// index page
import router from '@system.router';
class D{
  indexPushPage() {
    router.push({
      uri: 'pages/detail/detail'
    });
  }
}
export default new D()

// detail page
import router from '@system.router';
class E{
  detailPushPage() {
    router.push({
      uri: 'pages/mall/mall'
    });
  }
}
export default new E()

// Navigate from the mall page to the detail page through router.back().
import router from '@system.router';
class F{
  mallBackPage() {
    router.back();
  }
}
export default new F()

// Navigate from the detail page to the index page through router.back().
import router from '@system.router';
class G{
  defaultBack() {
    router.back();
  }
}
export default new G()

// Return to the detail page through router.back().
import router from '@system.router';
class H{
  backToDetail() {
    router.back({uri:'pages/detail/detail'});
  }
}
export default new H()

NOTE
In the example, the uri field indicates the page route, which is specified by the pages list in the config.json file.

router.getParams⁷⁺

getParams(): ParamsInterface

Obtains parameter information about the current page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

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

import router from '@system.router';
class I{
  clearPage() {
    router.clear();
  }
}
export default new I()

router.getLength

getLength(): string

Obtains the number of pages in the current stack.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

import router from '@system.router';
class J{
  getLength() {
    let size = router.getLength();
    console.log('pages stack size = ' + size);
  }
}
export default new J()

router.getState

getState(): RouterState

Obtains state information about the current page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

import router from '@system.router';
class K{
  getState() {
    let page = router.getState();
    console.log('current index = ' + page.index);
    console.log('current name = ' + page.name);
    console.log('current path = ' + page.path);
  }
}
export default new K()

router.enableAlertBeforeBackPage⁶⁺

enableAlertBeforeBackPage(options: EnableAlertBeforeBackPageOptions): void

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

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

import router from '@system.router';
class L{
  enableAlertBeforeBackPage() {
    router.enableAlertBeforeBackPage({
      message: 'Message Info',
      success: ()=> {
        console.log('success');
      },
      cancel: ()=> {
        console.log('cancel');
      }
    });
  }
}
export default new L()

router.disableAlertBeforeBackPage⁶⁺

disableAlertBeforeBackPage(options?: DisableAlertBeforeBackPageOptions): void

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

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

import router from '@system.router';
class Z{
  disableAlertBeforeBackPage() {
    router.disableAlertBeforeBackPage({
      success: ()=> {
        console.log('success');
      },
      cancel: ()=> {
        console.log('cancel');
      }
    });
  }
}
export default new Z()

RouterOptions

Defines the page routing parameters.

System capability: SystemCapability.ArkUI.ArkUI.Lite

BackRouterOptions

Defines the parameters for routing back.

System capability: The items in the table below require different system capabilities. For details, see the table.

RouterState

Defines the page state.

System capability: SystemCapability.ArkUI.ArkUI.Full

EnableAlertBeforeBackPageOptions⁶⁺

Defines the EnableAlertBeforeBackPage parameters.

System capability: SystemCapability.ArkUI.ArkUI.Full

DisableAlertBeforeBackPageOptions⁶⁺

Defines the DisableAlertBeforeBackPage parameters.

System capability: SystemCapability.ArkUI.ArkUI.Full

ParamsInterface

你可能感兴趣的鸿蒙文章

harmony 鸿蒙APIs

harmony 鸿蒙System Common Events (To Be Deprecated Soon)

harmony 鸿蒙System Common Events

harmony 鸿蒙API Reference Document Description

harmony 鸿蒙Enterprise Device Management Overview (for System Applications Only)

harmony 鸿蒙BundleStatusCallback

harmony 鸿蒙@ohos.bundle.innerBundleManager (innerBundleManager)

harmony 鸿蒙@ohos.distributedBundle (Distributed Bundle Management)

harmony 鸿蒙@ohos.bundle (Bundle)

harmony 鸿蒙@ohos.enterprise.EnterpriseAdminExtensionAbility (EnterpriseAdminExtensionAbility)