精选赣州网站建设,十大营销策略,网站的建设怎么弄,施工企业税款缴纳一、介绍
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块#xff0c;通过不同的url地址#xff0c;可以方便地进行页面路由#xff0c;轻松地访问不同的页面。
二、页面跳转
2.1、两种跳转模式#xff1a;
router.pushUrl()…一、介绍
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块通过不同的url地址可以方便地进行页面路由轻松地访问不同的页面。
二、页面跳转
2.1、两种跳转模式
router.pushUrl()目标页不会替换当前页而是压入页面栈。这样可以保留当前页的状态并且可以通过返回键或者调用router.back()方法返回到当前页。router.replaceUrl()目标页会替换当前页并销毁当前页。这样可以释放当前页的资源并且无法返回到当前页。
2.2、两种实例模式 Standard标准实例模式也是默认情况下的实例模式。每次调用该方法都会新建一个目标页并压入栈顶。 Single单实例模式。即如果目标页的url在页面栈中已经存在同url页面则离栈顶最近的同url页面会被移动到栈顶并重新加载如果目标页的url在页面栈中不存在同url页面则按照标准模式跳转。
2.3、使用步骤
2.3.1、导入Router模块
import router from ohos.router;
2.3.2、利用router实现跳转、返回等操作
2.3.2.1、不带参数传递的场景
场景1登录页跳转到首页需要保留主页在页面栈中以便返回时恢复状态。
使用pushUrl()方法并且使用Standard实例模式
import router from ohos.router
Entry
Component
struct LoginPage {State message: string loginbuild() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button(跳转到home页面--pushUrl).fontSize(20).onClick(() {router.pushUrl({url:pages/HomePage},router.RouterMode.Standard,(err) {if(err){console.log(路由失败)}})})}.width(100%)}.height(100%)}
} 场景1中登录跳转到首页时需要保证每次首页存在于页面栈中在返回时直接回到登录页。 需要将示例模式更换成Single即router.RouterMode.Single 场景2登录页跳转到首页销毁登录页在返回时直接退出应用。
使用replaceUrl()方法并且使用Standard实例模式
import router from ohos.router
Entry
Component
struct LoginPage {State message: string loginbuild() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button(跳转到home页面--replaceUrl).fontSize(20).onClick(() {router.replaceUrl({url:pages/HomePage},router.RouterMode.Standard,(err) {if(err){console.log(路由失败)}})})}.width(100%)}.height(100%)}
} 场景2中登录跳转到首页时如果已经存在了就不再新建首页直接跳转到首页。 需要将示例模式更换成Single即router.RouterMode.Single 2.3.2.2、带参数传递的场景
如果需要在跳转时传递一些数据给目标页则可以在调用Router模块的方法时添加一个params属性并指定一个对象作为参数。例如 Button(跳转到home页面--pushUrl).fontSize(20).onClick(() {router.pushUrl({url:pages/HomePage,params:{id:1}},router.RouterMode.Standard,(err) {if(err){console.log(路由失败)}})})
在目标页中可以通过调用Router模块的getParams()方法来获取传递过来的参数。例如
const params router.getParams(); // 获取传递过来的参数对象
const id params[id]; // 获取id属性的值
三、页面返回
3.1、三种返回方式
3.1.1、返回到上一个页面。
router.back();
3.1.2、返回到指定页面
router.back({url: pages/Info
});
这种方式可以返回到指定页面需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。
3.1.3、返回到指定页面并传递自定义参数信息。
router.back({url: pages/Info,params: {id:1}
});
这种方式不仅可以返回到指定页面还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。
在目标页中在需要获取参数的位置调用router.getParams()方法即可例如在onPageShow()生命周期回调中
onPageShow() {const params router.getParams(); // 获取传递过来的参数对象const id params[id]; // 获取id属性的值
}
四、页面返回前增加一个询问框
在开发应用时为了避免用户误操作或者丢失数据有时候需要在用户从一个页面返回到另一个页面之前弹出一个询问框让用户确认是否要执行这个操作。
4.1、系统默认询问框
如果想要在目标界面开启页面返回询问框需要在调用router.back()方法之前通过调用router.showAlertBeforeBackPage()方法设置返回询问框的信息。
例如在Home页面中定义一个返回按钮的点击事件处理函数点击按钮时弹出询问框点击确定按钮再返回到登录页
import router from ohos.router
Entry
Component
struct HomePage {State message: string HomeState params:any router.getParams()build() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text(接收login传递的id this.params.id).fontSize(30).fontWeight(FontWeight.Bold)Button(返回到login页面).fontSize(20).onClick(() {router.showAlertBeforeBackPage({message:确定返回到login页面吗})router.back()})}.width(100%)}.height(100%)}
}
其中router.showAlertBeforeBackPage()方法接收一个对象作为参数该对象包含以下属性
messagestring类型表示询问框的内容。 当用户点击“返回”按钮时会弹出确认对话框询问用户是否确认返回。选择“取消”将停留在当前页目标页选择“确认”将触发router.back()方法并根据参数决定如何执行跳转。
4.2、自定义询问框
点击按钮时调用弹窗的promptAction.showDialog()方法
import router from ohos.router
import promptAction from ohos.promptAction
Entry
Component
struct HomePage {State message: string HomeState params:any router.getParams()build() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text(接收login传递的id this.params.id).fontSize(30).fontWeight(FontWeight.Bold)Button(返回到login页面).fontSize(20).onClick(() {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});})})}.width(100%)}.height(100%)}
}
当用户点击“返回”按钮时会弹出自定义的询问框询问用户是否确认返回。选择“取消”将停留在当前页目标页选择“确认”将触发router.back()方法并根据参数决定如何执行跳转。 最后
