Page Routing

• Module to Import
• Permission List
• router.push(OBJECT)
• router.replace(OBJECT)
• router.back(OBJECT)
• router.clear()
• router.getLength()
• router.getState()

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

Module to Import

import router from '@system.router';

Permission List

None

router.push(OBJECT)

Navigates to a specified page in the application based on the page URL and parameters.

• Parameter

  Name	Type	Mandatory	Description
  uri	string	Yes	URI of the destination 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 URI is a slash (/), the home page is displayed.
  params	Object	No	Data that needs to be passed to the destination page during navigation. After the destination page is displayed, it can use the passed data, for example, this.data1 (data1 is a key in params). If there is the same key (for example, data1) on the destination page, the passed data1 value will overwrite the original value on the destination page.

• Example

  // Example code for the current page
  export default {
    pushPage() {
      router.push({
        uri: 'pages/routerpage2/routerpage2',
        params: {
  	data1: 'message',
          data2: {
            data3: [123, 456, 789]
  	},
        },
      });
    }
  }
  // Example code for the routerpage2 page
  export default {
    data: {
      data1: 'default',
      data2: {
        data3: [1, 2, 3]
      }
    },
    onInit() {
      console.info('showData1:' + this.data1);
      console.info('showData3:' + this.data2.data3);
    }
  }
  

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

router.replace(OBJECT)

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

• Parameter

  Name	Type	Mandatory	Description
  uri	string	Yes	URI of the destination 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 URI is a slash (/), the home page is displayed.
  params	Object	No	Data that needs to be passed to the destination page during navigation. After the destination page is displayed, it can use the passed data, for example, this.data1 (data1 is a key in params). If there is the same key (for example, data1) on the destination page, the passed data1 value will overwrite the original value on the destination page.

• Example

  // Example code for the current page
  export default {
    replacePage() {
      router.replace({
        uri: 'pages/detail/detail',
        params: {
          data1: 'message',
        },
      });
    }
  }
  // Example code for the detail page
  export default {
    data: {
      data1: 'default'
    },
    onInit() {
      console.info('showData1:' + this.data1)
    }
  }
  

router.back(OBJECT)

Returns to the previous page or a specified page.

• Parameter

  Name	Type	Mandatory	Description
  uri	string	No	URI of the page to return to. If the specified page does not exist in the page stack, the app does not respond. If this parameter is not set, the app returns to the previous page.

• Example

  // index page
  router.push({
    uri: 'pages/detail/detail',
  });
  
  // detail page
  router.push({
    uri: 'pages/mall/mall',
  });
  
  // Navigate from the mall page to the detail page through router.back().
  router.back();
  // Navigate from the detail page to the index page through router.back().
  router.back();
  // Return to the detail page through router.back().
  router.back({uri:'pages/detail/detail'});
  

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

router.clear()

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

• Parameter

  N/A

• Example

  router.clear();
  

router.getLength()

Obtains the number of pages in the current stack.

• Returned Value

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

• Example

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

router.getState()

Obtains information about the current page state.

• Returned Value

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

• Example

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