Router用于页面之间的跳转
两种跳转方式:
-
router.pushUrl() :
目标页不会替换当前页,而是压入页面栈。这样可以保留当前页的状态,并且可以通过返回键或者调用router.back()方法返回到当前页 -
router.replaceUrl():
目标页会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。 -
说明:
页面栈的最大容量为32个页面。如果超过这个限制,可以调用router.clear()方法清空历史页面栈,释放内存空间 -
同时,Router模块提供了两种实例模式,分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。----可能面试题
Standard:标准实例模式,也是默认情况下的实例模式。每次调用该方法都会新建一个目标页,并压入栈顶。
Single:单实例模式。即如果目标页的url在页面栈中已经存在同url页面,则离栈顶最近的同url页面会被移动到栈顶,并重新加载;如果目标页的url在页面栈中不存在同url页面,则按照标准模式跳转。 -
导入Router模块
import router from '@ohos.router';
- 简单使用
router.pushUrl({url : "pages/Mypage"})
- 带模式
router.pushUrl({url : "pages/Mypage"}, router.RouterMode.Single)
- 跳转完成后,销毁第一个页面
router.replaceUrl({url : "pages/Mypage"})
- 带有参数
router.pushUrl({url: "pages/MyPage", params: {name: "huxiubo"}})
- 目标页面,onPageShow()中 接收参数
onPageShow() {
const param = router.getParams();
if (param != undefined) { // 做个判断
const name = param["name"] as string
console.info(TAG, `age :${name}`);
}
}
- 返回上一个页面
router.back();
- 返回到指定页面 , 注意有问题,不建议这么用,Home页面没在页面栈中时候没有反应
router.back({
url: 'pages/Home'
});
- 返回到指定页面,并传递自定义参数信息
router.back({
url: 'pages/Home',
params: {
info: '来自Home页'
}
});
- 页面返回前增加一个询问框
需要 router.showAlertBeforeBackPage()、router.back(); 一起用
// 定义一个返回按钮的点击事件处理函数
function onBackClick(): void {
// 调用router.showAlertBeforeBackPage()方法,设置返回询问框的信息
try {
router.showAlertBeforeBackPage({
message: '您还没有完成支付,确定要返回吗?' // 设置询问框的内容
});
} catch (err) {
console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);
}
// 调用router.back()方法,返回上一个页面
router.back();
}
- 自定义询问框
在事件回调中,调用弹窗的promptAction.showDialog()方法
function onBackClick() {
// 弹出自定义的询问框
promptAction.showDialog({
message: '您还没有完成支付,确定要返回吗?',
buttons: [
{
text: '取消',
color: '#FF0000'
},
{
text: '确认',
color: '#0099FF'
}
]
}).then((result) => {
if (result.index === 0) {
// 用户点击了“取消”按钮
console.info('User canceled the operation.');
} else if (result.index === 1) {
// 用户点击了“确认”按钮
console.info('User confirmed the operation.');
// 调用router.back()方法,返回上一个页面
router.back();
}
}).catch((err) => {
console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
})
}
网友评论