页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块通过不同的url地址可以方便地进行页面路由轻松地访问不同的页面 。Router模块提供了两种跳转模式分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。router.pushUrl()目标页不会替换当前页而是压入页面栈。这样可以保留当前页的状态并且可以通过返回键或者调用router.back()方法返回到当前页。router.replaceUrl()目标页会替换当前页并销毁当前页。这样可以释放当前页的资源并且无法返回到当前页。提示页面栈的最大容量为32个页面。如果超过这个限制可以调用router.clear()方法清空历史页面栈释放内存空间。在使用页面路由Router相关功能之前需要在代码中先导入Router模块。import router from ohos.router;9.1、路由跳转Button(跳转到首页).onClick(() {router.pushUrl({url:pages/index})})9.2、路由跳转传值如果需要在跳转时传递一些数据给目标页则可以在调用Router模块的方法时添加一个params属性并指定一个对象作为参数。例如Button(跳转到新闻列表页).onClick(() {router.pushUrl({url:pages/newList,params:{pId:1,cId:2}})})在目标页中可以通过调用Router模块的getParams()方法来获取传递过来的参数。例如aboutToAppear(){const params router.getParams(); // 获取传递过来的参数对象const pId params[pId]; // 获取pId属性的值const cId params[cId]; // 获取cId属性的值}9.3、页面返回当用户在一个页面完成操作后通常需要返回到上一个页面或者指定页面这就需要用到页面返回功能。在返回的过程中可能需要将数据传递给目标页这就需要用到数据传递功能。返回到上一个页面router.back();这种方式会返回到上一个页面即上一个页面在页面栈中的位置。上一个页面必须存在于页面栈中才能够返回否则该方法将无效。返回到指定页面router.back({ url: pages/Home});这种方式可以返回到指定页面需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。返回到指定页面并传递自定义参数信息router.back({url: pages/Home,params: {info: 来自Home页}});这种方式不仅可以返回到指定页面还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。在目标页中在需要获取参数的位置调用router.getParams()方法即可例如在onPageShow()生命周期回调中onPageShow() {const params router.getParams();// 获取传递过来的参数对象const info params[info]; //获取info属性的值}页面返回前增加一个询问框在开发应用时为了避免用户误操作或者丢失数据有时候需要在用户从一个页面返回到另一个页面之前弹出一个询问框让用户确认是否要执行这个操作。如果想要在目标界面开启页面返回询问框需要在调用router.back()方法之前通过调用router.showAlertBeforeBackPage()方法设置返回询问框的信息。例如在支付页面中定义一个返回按钮的点击事件处理函数// 定义一个返回按钮的点击事件处理函数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();其中router.showAlertBeforeBackPage()方法接收一个对象作为参数该对象包含以下属性messagestring类型表示询问框的内容。如果调用成功则会在目标界面开启页面返回询问框如果调用失败则会抛出异常并通过err.code和err.message获取错误码和错误信息。当用户点击“返回”按钮时会弹出确认对话框询问用户是否确认返回。选择“取消”将停留在当前页目标页选择“确认”将触发router.back()方法并根据参数决定如何执行跳转。以上内容均参考于鸿蒙HarmonyOS开发页面路由-华为开发者话题 | 华为开发者联盟实战演示屏幕录制 2026-06-29 093252
ArkUI页面跳转介绍
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块通过不同的url地址可以方便地进行页面路由轻松地访问不同的页面 。Router模块提供了两种跳转模式分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。router.pushUrl()目标页不会替换当前页而是压入页面栈。这样可以保留当前页的状态并且可以通过返回键或者调用router.back()方法返回到当前页。router.replaceUrl()目标页会替换当前页并销毁当前页。这样可以释放当前页的资源并且无法返回到当前页。提示页面栈的最大容量为32个页面。如果超过这个限制可以调用router.clear()方法清空历史页面栈释放内存空间。在使用页面路由Router相关功能之前需要在代码中先导入Router模块。import router from ohos.router;9.1、路由跳转Button(跳转到首页).onClick(() {router.pushUrl({url:pages/index})})9.2、路由跳转传值如果需要在跳转时传递一些数据给目标页则可以在调用Router模块的方法时添加一个params属性并指定一个对象作为参数。例如Button(跳转到新闻列表页).onClick(() {router.pushUrl({url:pages/newList,params:{pId:1,cId:2}})})在目标页中可以通过调用Router模块的getParams()方法来获取传递过来的参数。例如aboutToAppear(){const params router.getParams(); // 获取传递过来的参数对象const pId params[pId]; // 获取pId属性的值const cId params[cId]; // 获取cId属性的值}9.3、页面返回当用户在一个页面完成操作后通常需要返回到上一个页面或者指定页面这就需要用到页面返回功能。在返回的过程中可能需要将数据传递给目标页这就需要用到数据传递功能。返回到上一个页面router.back();这种方式会返回到上一个页面即上一个页面在页面栈中的位置。上一个页面必须存在于页面栈中才能够返回否则该方法将无效。返回到指定页面router.back({ url: pages/Home});这种方式可以返回到指定页面需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。返回到指定页面并传递自定义参数信息router.back({url: pages/Home,params: {info: 来自Home页}});这种方式不仅可以返回到指定页面还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。在目标页中在需要获取参数的位置调用router.getParams()方法即可例如在onPageShow()生命周期回调中onPageShow() {const params router.getParams();// 获取传递过来的参数对象const info params[info]; //获取info属性的值}页面返回前增加一个询问框在开发应用时为了避免用户误操作或者丢失数据有时候需要在用户从一个页面返回到另一个页面之前弹出一个询问框让用户确认是否要执行这个操作。如果想要在目标界面开启页面返回询问框需要在调用router.back()方法之前通过调用router.showAlertBeforeBackPage()方法设置返回询问框的信息。例如在支付页面中定义一个返回按钮的点击事件处理函数// 定义一个返回按钮的点击事件处理函数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();其中router.showAlertBeforeBackPage()方法接收一个对象作为参数该对象包含以下属性messagestring类型表示询问框的内容。如果调用成功则会在目标界面开启页面返回询问框如果调用失败则会抛出异常并通过err.code和err.message获取错误码和错误信息。当用户点击“返回”按钮时会弹出确认对话框询问用户是否确认返回。选择“取消”将停留在当前页目标页选择“确认”将触发router.back()方法并根据参数决定如何执行跳转。以上内容均参考于鸿蒙HarmonyOS开发页面路由-华为开发者话题 | 华为开发者联盟实战演示屏幕录制 2026-06-29 093252
