文章目录
一、路由跳转模式与实例
跳转模式 有点类似于vue的路由跳转
- router.pushUrl 保留路由栈,保留当前的页面;
- router.replaceUrl 销毁当前页面,跳转一个新的页面 ;
- router.back 返回上个路由栈保存的页面;
跳转实例
- router.RouterMode.Standard 默认模式 压入栈顶;
- router.RouterMode.Single 如果跳转的目标页在路由栈中已经存在,那么就会将距离栈顶最近的url放到栈顶,并重新加载。如果不存在 将按照默认模式执行;
1.router.pushUrl
import router from '@ohos.router'
//跳转到新的页面 保留当前路由栈
router.pushUrl(
{
//跳转路径
url:'pages/HomePage',
//传递参数
params:{id:1}
},
//默认模式
router.RouterMode.Standard,
(err) => {
if(err){
console.log('路由失败')
}
}
)
})
//接取参数
router.getParams()['id']
2.router.replaceUrl
import router from '@ohos.router'
//跳转到新的页面 保留当前路由栈
router.replaceUrl (
{
//跳转路径
url:'pages/HomePage',
//传递参数
params:{id:1}
},
//默认模式
router.RouterMode.Standard,
(err) => {
if(err){
console.log('路由失败')
}
}
)
})
//接取参数
router.getParams()['id']
3.router.back
import router from '@ohos.router'
//1、直接返回
router.back();
//2、返回到指定页面
router.back({
url: 'pages/Info'
});
//3、返回到指定页面,并传递自定义参数信息
router.back({
url: 'pages/Info',
params: {
id:1
}
});
//4、系统默认返回询问框
router.showAlertBeforeBackPage({
message:'确定返回到login页面吗?'
})
router.back()
//5、自定义询问框
import promptAction from '@ohos.promptAction'
promptAction.showDialog({
message:'确定返回到login页面吗?',
buttons: [
{
text: '取消',
color: '#FF0000'
},
{
text: '确认',
color: '#0099FF'
}
]
}).then((result)=>{
if(result.index === 0){
console.log('点击了取消按钮')
}else if(result.index === 1){
// 用户点击了"确认"按钮
console.log('用户点击了"确认"按钮')
// 调用router.back()方法,返回上一个页面
router.back();
}
}).catch(err => {
console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
})
})