Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 e3fe704d 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!7147 翻译完成：6392 add router mode 

Merge pull request !7147 from wusongqing/TR6392
上级 2dda1a70 a8de8471
显示空白变更内容
内联 并排
Showing with 231 addition and 266 deletion
en/application-dev/reference/apis/js-apis-router.md
浏览文件 @ e3fe704d
# Page Routing
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 an application, and return to the previous page or a specified page.
> **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 the APIs in **onInit** and **onReady** when the page is still in the rendering phase.
>
> - 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.
## Modules to Import
......@@ -11,10 +14,6 @@
import router from '@ohos.router'
```
## Required Permissions
None.
## router.push
push(options: RouterOptions): void
......@@ -24,84 +23,98 @@ Navigates to a specified page in the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [RouterOptions](#routeroptions) | Yes| Page routing parameters.|
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [RouterOptions](#routeroptions) | Yes | Page routing parameters.|
**Example**
```js
// Current page
export default {
pushPage() {
router.push({
url: 'pages/routerpage2/routerpage2',
router.push({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
});
}
}
});
```
## router.push<sup>9+</sup>
push(options: RouterOptions, mode: RouterMode): void
Navigates to a specified page in the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ----------------- | ------------------------------- | ---- | -------------------- |
| options | [RouterOptions](#routeroptions) | Yes | Page routing parameters. |
| mode<sup>9+</sup> | [RouterMode](#routermode9) | Yes | Routing mode.|
**Example**
```js
// routerpage2 page
export default {
data: {
data1: 'default',
router.push({
url: 'pages/routerpage2/routerpage2',
params: {
data1: 'message',
data2: {
data3: [1, 2, 3]
}
data3: [123, 456, 789]
},
onInit() {
console.info('showData1:' + this.data1);
console.info('showData3:' + this.data2.data3);
}
}
},
},router.RouterMode.Standard);
```
## router.replace
replace(options: RouterOptions): void
replace(options: RouterOptions, mode?: RouterMode): void
Replaces the current page with another one in the application and destroys the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [RouterOptions](#routeroptions) | Yes| Description of the new page.|
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [RouterOptions](#routeroptions) | Yes | Description of the new page.|
**Example**
```js
// Current page
export default {
replacePage() {
router.replace({
url: 'pages/detail/detail',
router.replace({
url: 'pages/detail',
params: {
data1: 'message',
},
});
}
}
});
```
## router.replace<sup>9+</sup>
replace(options: RouterOptions, mode: RouterMode): void
Replaces the current page with another one in the application and destroys the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ----------------- | ------------------------------- | ---- | -------------------- |
| options | [RouterOptions](#routeroptions) | Yes | Description of the new page. |
| mode<sup>9+</sup> | [RouterMode](#routermode9) | Yes | Routing mode.|
**Example**
```js
// detail page
export default {
data: {
data1: 'default'
router.replace({
url: 'pages/detail/detail',
params: {
data1: 'message',
},
onInit() {
console.info('showData1:' + this.data1)
}
}
}, router.RouterMode.Standard);
```
## router.back
......@@ -113,58 +126,14 @@ Returns to the previous page or a specified page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [RouterOptions](#routeroptions) | Yes| Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.|
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------------------------------------------------ |
| options | [RouterOptions](#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.|
**Example**
```js
// index page
export default {
indexPushPage() {
router.push({
url: 'pages/detail/detail',
});
}
}
```
```js
// detail page
export default {
detailPushPage() {
router.push({
url: 'pages/mall/mall',
});
}
}
```
```js
// Navigate from the mall page to the detail page through router.back().
export default {
mallBackPage() {
router.back();
}
}
```
```js
// Navigate from the detail page to the index page through router.back().
export default {
defaultBack() {
router.back();
}
}
```
```js
// Return to the detail page through router.back().
export default {
backToDetail() {
router.back({uri:'pages/detail/detail'});
}
}
router.back({uri:'pages/detail'});
```
## router.clear
......@@ -176,12 +145,9 @@ Clears all historical pages in the stack and retains only the current page at th
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```js
export default {
clearPage() {
router.clear();
}
}js
router.clear();
```
## router.getLength
......@@ -193,18 +159,14 @@ Obtains the number of pages in the current stack.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| ------ | ---------------------------------- |
| string | Number of pages in the stack. The maximum value is **32**.|
**Example**
```js
export default {
getLength() {
var size = router.getLength();
console.log('pages stack size = ' + size);
}
}
var size = router.getLength();
console.log('pages stack size = ' + size);
```
## router.getState
......@@ -220,28 +182,26 @@ Obtains state information about the current page.
| Type | Description |
| --------------------------- | -------------- |
| [RouterState](#routerstate) | Page routing state.|
**Example**
```js
var page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
```
## RouterState
Describes the page routing state.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name| Type| Description|
| -------- | -------- | -------- |
| index | number | Index of the current page in the stack.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;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**
```js
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);
}
}
```
| Name | Type | Description |
| ----- | ------ | ------------------------------------------------------------ |
| index | number | Index of the current page in the stack. 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. |
## router.enableAlertBeforeBackPage
......@@ -252,26 +212,16 @@ Enables the display of a confirm dialog box before returning to the previous pag
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [EnableAlertOptions](#enablealertoptions) | Yes| Description of the dialog box.|
| Name | Type | Mandatory| Description |
| ------- | ----------------------------------------- | ---- | ------------------ |
| options | [EnableAlertOptions](#enablealertoptions) | Yes | Description of the dialog box.|
**Example**
```js
export default {
enableAlertBeforeBackPage() {
router.enableAlertBeforeBackPage({
message: 'Message Info',
success: function() {
console.log('success');
},
fail: function() {
console.log('fail');
},
message: 'Message Info'
});
}
}
```
## EnableAlertOptions
......@@ -279,9 +229,9 @@ Describes the confirm dialog box.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| message | string | Yes| Content displayed in the confirm dialog box.|
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ---------------- |
| message | string | Yes | Content displayed in the confirm dialog box.|
## router.disableAlertBeforeBackPage
......@@ -293,11 +243,7 @@ Disables the display of a confirm dialog box before returning to the previous pa
**Example**
```js
export default {
disableAlertBeforeBackPage() {
router.disableAlertBeforeBackPage();
}
}
router.disableAlertBeforeBackPage();
```
## router.getParams
......@@ -316,10 +262,44 @@ Obtains the parameters passed from the page that initiates redirection to the cu
**Example**
- Web-like example
```js
// Current page
export default {
```
router.getParams();
```
## RouterOptions
Describes the page routing options.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| url | string | Yes | URI of the destination page, in either of the following formats:<br>- Absolute path of the page. The value is available in the pages list in the **config.json** file, for example:<br>- pages/index/index<br>- pages/detail/detail<br>- 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 redirection. 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 replace the original value on the destination page.|
> **NOTE**
>
> The page routing stack supports a maximum of 32 pages.
## RouterMode<sup>9+</sup>
Enumerates the routing modes.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Description |
| -------- | ------------------------------------------------------------ |
| Standard | Standard mode. |
| Single | Singleton mode.<br>If the URL of the target page already exists in the page stack, the page closest to the top of the stack is moved as a new page to the top of the stack.<br>If the URL of the target page does not exist in the page stack, the page is redirected to in standard mode.|
## Examples
### JavaScript-based Web-like Development Paradigm
```js
// Current page
export default {
pushPage() {
router.push({
url: 'pages/detail/detail',
......@@ -328,26 +308,26 @@ Obtains the parameters passed from the page that initiates redirection to the cu
},
});
}
}
```
```js
// detail page
export default {
}
```
```js
// detail page
export default {
onInit() {
console.info('showData1:' + router.getParams().data1);
}
}
```
}
```
- Declarative example
### TypeScript-based Declarative Development Paradigm
```ts
// Navigate to the target page through router.push with the params parameter carried.
import router from '@ohos.router'
```ts
// Navigate to the target page through router.push with the params parameter carried.
import router from '@ohos.router'
@Entry
@Component
struct Index {
@Entry
@Component
struct Index {
async routePage() {
let options = {
url: 'pages/second',
......@@ -384,16 +364,16 @@ Obtains the parameters passed from the page that initiates redirection to the cu
.width('100%')
.height('100%')
}
}
```
}
```
```ts
// Receive the transferred parameters on the second page.
import router from '@ohos.router'
```ts
// Receive the transferred parameters on the second page.
import router from '@ohos.router'
@Entry
@Component
struct Second {
@Entry
@Component
struct Second {
private content: string = "This is the second page."
@State text: string = router.getParams()['text']
@State data: any = router.getParams()['data']
......@@ -418,20 +398,5 @@ Obtains the parameters passed from the page that initiates redirection to the cu
.width('100%')
.height('100%')
}
}
```
## RouterOptions
Describes the page routing options.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| url | string | Yes| URI of the destination page, in either of the following formats:<br>-&nbsp; Absolute path of the page. The value is available in the pages list in the config.json file, for example:<br>&nbsp;&nbsp;-&nbsp;pages/index/index<br>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br>-&nbsp; 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 redirection. 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 replace the original value on the destination page.|
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> The page routing stack supports a maximum of 32 pages.
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或