@ohos.router (页面路由)
导入模块
import router from'@ohos.router'
router.push
push(options: RouterOptions): void
跳转到应用内的指定页面。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 跳转页面描述信息。 |
示例:
router.push({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
});
router.replace
replace(options: RouterOptions): void
用应用内的某个页面替换当前页面,并销毁被替换的页面。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 替换页面描述信息。 |
示例:
router.replace({
url: 'pages/detail',
params: {
data1: 'message',
},
});
router.back
back(options?: RouterOptions ): void
返回上一页面或指定的页面。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 返回页面描述信息,其中参数url指路由跳转时会返回到指定url的界面,如果页面栈上没有url页面,则不响应该情况。如果url未设置,则返回上一页。 |
示例:
router.back({url:'pages/detail'});
router.clear
clear(): void
清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
系统能力: SystemCapability.ArkUI.ArkUI.Full
示例:
router.clear();
router.getLength
getLength(): string
获取当前在页面栈内的页面数量。
系统能力:SystemCapability.ArkUI.ArkUI.Full
返回值:
类型 | 说明 |
string | 页面数量,页面栈支持最大数值是32。 |
示例:
var size = router.getLength();
console.log('pages stack size = ' + size);
router.getState
getState(): RouterState
获取当前页面的状态信息。
系统能力: SystemCapability.ArkUI.ArkUI.Full
返回值:
类型 | 说明 |
页面状态信息。 |
示例:
var page = router.getState();
console.log('current index = '+ page.index);
console.log('current name = '+ page.name);
console.log('current path = '+ page.path);
RouterState
页面状态信息。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
名称 | 类型 | 说明 |
index | number | 表示当前页面在页面栈中的索引。从栈底到栈顶,index从1开始递增。 |
name | string | 表示当前页面的名称,即对应文件名。 |
path | string | 表示当前页面的路径。 |
router.enableAlertBeforeBackPage
enableAlertBeforeBackPage(options: EnableAlertOptions): void
开启页面返回询问对话框。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 文本弹窗信息描述。 |
示例:
router.enableAlertBeforeBackPage({
message: 'Message Info'
});
EnableAlertOptions
页面返回询问对话框选项。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full
名称 | 类型 | 必填 | 说明 |
message | string | 是 | 询问对话框内容。 |
router.disableAlertBeforeBackPage
disableAlertBeforeBackPage(): void
禁用页面返回询问对话框。
系统能力: SystemCapability.ArkUI.ArkUI.Full
示例:
router.disableAlertBeforeBackPage();
router.getParams
getParams(): Object
获取发起跳转的页面往当前页传入的参数。
系统能力: SystemCapability.ArkUI.ArkUI.Full
返回值:
类型 | 说明 |
Object | 发起跳转的页面往当前页传入的参数。 |
示例:
router.getParams();
RouterOptions
路由跳转选项。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Lite。
名称 | 类型 | 必填 | 说明 |
url | string | 是 | 表示目标页面的uri,可以用以下两种格式: - 页面绝对路径,由配置文件中pages列表提供,例如: - pages/index/index - pages/detail/detail - 特殊值,如果uri的值是"/",则跳转到首页。 |
params | Object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后,使用router.getParams()获取传递的参数,此外,在类web范式中,参数也可以在页面中直接使用,如this.keyValue(keyValue为跳转时params参数中的key值),如果目标页面中已有该字段,则其值会被传入的字段值覆盖。 |
说明
页面路由栈支持的最大Page数量为32。
@ohos.prompt (弹窗)
导入模块
import prompt from'@ohos.prompt'
权限列表
无
prompt.showToast
showToast(options: ShowToastOptions): void
创建并显示文本提示框。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 文本弹窗选项。 |
示例:
exportdefault {
showToast() {
prompt.showToast({
message: 'Message Info',
duration: 2000,
});
}
}
ShowToastOptions
文本提示框的选项。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
名称 | 类型 | 必填 | 说明 |
message | string | 是 | 显示的文本信息。 |
duration | number | 否 | 默认值1500ms,建议区间:1500ms-10000ms,若小于1500ms则取默认值。 |
bottom | <length> | 否 | 设置弹窗边框距离屏幕底部的位置。 |
prompt.showDialog
showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse>
创建并显示对话框,对话框响应后同步返回结果。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 对话框选项。 |
返回值:
类型 | 说明 |
Promise<ShowDialogSuccessResponse> | 对话框响应结果。 |
示例:
exportdefault {
showDialog() {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000',
},
{
text: 'button2',
color: '#000000',
}
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.index);
})
.catch(err => {
console.info('showDialog error: ' + err);
})
}
}
prompt.showDialog
showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void
创建并显示对话框,对话框响应结果异步返回。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 页面显示对话框信息描述。 | |
callback | AsyncCallback<ShowDialogSuccessResponse> | 是 | 对话框响应结果回调。 |
示例:
exportdefault {
callback(err, data) {
if(err) {
console.info('showDialog err: ' + err);
return;
}
console.info('showDialog success callback, click button: ' + data.index);
},
showDialog() {
prompt.showDialog({
title: 'showDialog Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000',
},
{
text: 'button2',
color: '#000000',
}
]
}, this.callback);
}
}
ShowDialogOptions
对话框的选项。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
名称 | 类型 | 必填 | 说明 |
title | string | 否 | 标题文本。 |
message | string | 否 | 内容文本。 |
buttons | Array | 否 | 对话框中按钮的数组,结构为:{text:'button', color: '#666666'},支持1-3个按钮。其中第一个为positiveButton;第二个为negativeButton;第三个为neutralButton。 |
ShowDialogSuccessResponse
对话框的响应结果。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
名称 | 类型 | 说明 |
index | number | 选中按钮在buttons数组中的索引。 |
prompt.showActionMenu
showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenuSuccessResponse>):void
创建并显示操作菜单,菜单响应结果异步返回。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 操作菜单选项。 | |
callback | AsyncCallback<ActionMenuSuccessResponse> | 是 | 菜单响应结果回调。 |
示例:
exportdefault {
callback(err, data) {
if(err) {
console.info('showActionMenu err: ' + err);
return;
}
console.info('showActionMenu success callback, click button: ' + data.index);
},
showActionMenu() {
prompt.showActionMenu({
title: 'Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
{
text: 'item2',
color: '#000000',
},
]
}, this.callback)
}
}
prompt.showActionMenu
showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>
创建并显示操作菜单,菜单响应后同步返回结果。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
options | 是 | 操作菜单选项。 |
返回值:
类型 | 说明 |
Promise<ActionMenuSuccessResponse> | 菜单响应结果。 |
示例:
exportdefault {
showActionMenu() {
prompt.showActionMenu({
title: 'showActionMenu Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
{
text: 'item2',
color: '#000000',
},
]
})
.then(data => {
console.info('showActionMenu success, click button: ' + data.index);
})
.catch(err => {
console.info('showActionMenu error: ' + err);
})
}
}
ActionMenuOptions
操作菜单的选项。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
名称 | 类型 | 必填 | 说明 |
title | string | 否 | 标题文本。 |
buttons | Array | 是 | 菜单中菜单项按钮的数组,结构为:{text:'button', color: '#666666'},支持1-6个按钮。大于6个按钮时弹窗不显示。 |
ActionMenuSuccessResponse
操作菜单的响应结果。
系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
名称 | 类型 | 必填 | 说明 |
index | number | 否 | 选中按钮在buttons数组中的索引,从0开始。 |