# Page Routing
> **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);
```