# 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';
```
## Required Permissions
None.
## router.push
push\(Object\): void
Navigates to a specified page in the application based on the page URL and parameters.
- Parameters
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
replace\(Object\): void
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
back\(Object\): void
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
export default {
indexPushPage() {
router.push({
uri: 'pages/detail/detail',
});
}
}
// detail page
export default {
detailPushPage() {
router.push({
uri: 'pages/mall/mall',
});
}
}
// Navigate from the mall page to the detail page through router.back().
export default {
mallBackPage() {
router.back();
}
}
// Navigate from the detail page to the index page through router.back().
export default {
defaultBack() {
router.back();
}
}
// Return to the detail page through router.back().
export default {
backToDetail() {
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
clear\(\): void
Clears all historical pages and retains only the current page at the top of the stack.
- Example
```
export default {
clearPage() {
router.clear();
}
}
```
## router.getLength
getLength\(\): string
Obtains the number of pages in the current stack.
- Return values
Type
Description
string
Number of pages in the stack. The maximum value is 32.
- Example
```
export default {
getLength() {
var size = router.getLength();
console.log('pages stack size = ' + size);
}
}
```
## router.getState
getState\(\): <[RouterState](#tf9e3eb9ef0aa4d9880f996fe6afa6d1b)\>
Obtains information about the current page state.
- Return values
**Table 1** RouterState
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
```
export default {
getState() {
var page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
}
}
```
## router.enableAlertBeforeBackPage6+
enableAlertBeforeBackPage\(Object\): void
Enables the display of a confirm dialog for returning to the previous page.
- Parameter
Name
Type
Mandatory
Description
message
string
Yes
Content of the confirm dialog.
success
() => void
No
Called when the operation is successful.
fail
() => void
No
Called when the operation fails.
complete
() => void
No
Called when the operation is complete.
- Example
```
export default {
enableAlertBeforeBackPage() {
router.enableAlertBeforeBackPage({
message: 'Message Info',
success: function() {
console.log('success');
},
fail: function() {
console.log('fail');
},
});
}
}
```
## router.disableAlertBeforeBackPage6+
disableAlertBeforeBackPage\(Object\): void
Disables the display of a confirm dialog for returning to the previous page.
- Parameters