玩转鸿蒙NXET之组件导航与路由跳转二
页面路由(@ohos.router)
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。本文将从页面跳转、页面返回、页面返回前增加一个询问框和命名路由几个方面介绍Router模块提供的功能。
页面跳转与参数接收
页面跳转
页面跳转是开发过程中的一个重要组成部分。在使用应用程序时,通常需要在不同的页面之间跳转,有时还需要将数据从一个页面传递到另一个页面。
方法 | router.pushUrl() | router.replaceUrl() |
---|---|---|
用途 | 用于添加新页面到页面栈,保留原有页面。 | 用于替换当前页面,将目标页面URL替代为当前页面URL。 |
参数 | 接受目标页面URL和导航模式参数。 | 接受目标页面URL和导航模式参数。 |
页面栈变化 | 如果目标页面的URL已存在于页面栈中,会增加页面栈的元素数量。 | 如果目标页面的URL已存在于页面栈中,会减少页面栈的元素数量。 |
行为 | 创建新页面并添加到页面栈,保留原有页面。 | 移动现有页面到栈顶,替换当前页面,销毁被替换的当前页面。 |
导航模式 | 通常支持 “Single” 和 “Standard” 模式。 | 通常支持 “Single” 和 “Standard” 模式。 |
使用场景 | 用于常规页面切换,保留原有页面状态。 | 用于特殊场景,如页面替换和销毁。 |
特征 | router.pushUrl() | router.replaceUrl() |
---|---|---|
导航模式 | 通常支持 “Single” 和 “Standard” 模式。 | 通常支持 “Single” 和 “Standard” 模式。 |
“Single” 行为 | - 如果目标页面的URL已存在于页面栈中,会增加页面栈的元素数量。 - 最近的相同URL页面会被移动到栈顶,成为新建页。 - 原来的页面仍然存在于栈中,页面栈的元素数量不变。 | - 如果目标页面的URL已存在于页面栈中,会减少页面栈的元素数量。 - 移动现有页面到栈顶,替换当前页面,销毁被替换的当前页面。 |
“Standard” 行为 | - 无论目标页面的URL在页面栈中是否存在相同的URL页面,会按照多实例模式进行导航。 - 页面栈的元素数量保持不变。 | - 无论目标页面的URL在页面栈中是否存在相同的URL页面,会按照多实例模式进行导航。 - 页面栈的元素数量保持不变。 |
router.pushUrl({ url: 'pages/Second', params: { src: 'Index页面传来的数据', } }, router.RouterMode.Single) router.replaceUrl({ url: 'pages/Second', params: { src: 'Index页面传来的数据', } }, router.RouterMode.Single)
参数接收
通过调用router.getParams()方法获取Index页面传递过来的自定义参数
import router from '@ohos.router'; @Entry @Component struct Second { @State src: string = router.getParams()?.['src']; // 页面刷新展示 ... }
页面返回
页面返回
当用户在一个页面完成操作后,通常需要返回到上一个页面或者指定页面,这就需要用到页面返回功能。在返回的过程中,可能需要将数据传递给目标页面,这就需要用到数据传递功能。
在Second页面中,可以通过调用router.back()方法实现返回到上一个页面,或者在调用router.back()方法时增加可选的options参数(增加url参数)返回到指定页面,也可以返回命名路由页面。
import router from '@ohos.router'; // 返回上级 router.back(); // 返回制定页面 router.back({ url: 'pages/Index' }); // myPage为返回的命名路由页面别名 router.back({ url: 'myPage' });
页面返回询问对话框
在开发应用时,为了避免用户误操作或者丢失数据,有时候需要在用户从一个页面返回到另一个页面之前,弹出一个询问框,让用户确认是否要执行这个操作。
-
启用页面返回询问对话框功能:
使用 router.enableBackPageAlert() 方法开启页面返回询问对话框功能。这个功能只针对当前页面生效。在调用 router.pushUrl() 或 router.replaceUrl() 方法后,跳转到的新页面被视为新建页面,因此在页面返回之前需要先调用 router.enableBackPageAlert() 方法,以启用页面返回询问对话框功能。
router.enableBackPageAlert({ message: 'Message Info' }); router.back();
-
关闭页面返回询问对话框功能:
如果需要关闭页面返回询问对话框功能,可以使用 router.disableAlertBeforeBackPage() 方法。这个方法用于在特定情况下禁用询问对话框,以确保在页面返回时不会出现确认提示。
-
自定义询问框
自定义询问框的方式,可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别,提高应用的用户体验度。
import router from '@ohos.router'; import promptAction from '@ohos.promptAction'; import { BusinessError } from '@ohos.base'; function onBackClick() { // 弹出自定义的询问框 promptAction.showDialog({ message: '您还没有完成支付,确定要返回吗?', buttons: [ { text: '取消', color: '#FF0000' }, { text: '确认', color: '#0099FF' } ] }).then((result:promptAction.ShowDialogSuccessResponse) => { 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:Error) => { let message = (err as BusinessError).message let code = (err as BusinessError).code console.error(`Invoke showDialog failed, code is ${code}, message is ${message}`); }) }
参数接收
在Second页面中,调用router.back()方法返回上一个页面或者返回指定页面时,根据需要继续增加自定义参数,例如在返回时增加一个自定义参数src。
router.back({ url: 'pages/Index', params: { src: 'Second页面传来的数据', } })
从Second页面返回到Index页面。在Index页面通过调用router.getParams()方法,获取Second页面传递过来的自定义参数。
在调用 router.back() 方法时,不会新建页面,而是返回到原来的页面。在原来页面中使用 @State 声明的变量不会重复声明,也不会触发页面的 aboutToAppear() 生命周期回调。因此,不能直接在变量声明以及页面的 aboutToAppear() 生命周期回调中接收和解析 router.back() 传递过来的自定义参数。
这意味着当使用 router.back() 返回到前一个页面时,需要采取其他方式来传递和处理自定义参数,因为原页面的状态和生命周期不会重新初始化。
可以放在业务需要的位置进行参数解析。示例代码在Index页面中的onPageShow()生命周期回调中进行参数的解析。
import router from '@ohos.router'; @Entry @Component struct Index { @State src: string = ''; onPageShow() { this.src = router.getParams()?.['src']; } // 页面刷新展示 ... }
命名路由
在开发中为了跳转到共享包Har或者Hsp中的页面(即共享包中路由跳转),可以使用router.pushNamedRoute()来实现。
-
在想要跳转到的共享包Har或者Hsp页面里,给@Entry修饰的自定义组件命名:
// library/src/main/ets/pages/Index.ets // library为新建共享包自定义的名字 @Entry({ routeName: 'myPage' }) @Component export struct MyComponent { build() { Row() { Column() { Text('Library Page') .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') } }
-
配置成功后需要在跳转的页面中引入命名路由的页面:
import router from '@ohos.router'; import { BusinessError } from '@ohos.base'; import('@ohos/library/src/main/ets/pages/Index'); // 引入共享包中的命名路由页面 @Entry @Component struct Index { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text('Hello World') .fontSize(50) .fontWeight(FontWeight.Bold) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() => { // 点击跳转到其他共享包中的页面 try { router.pushNamedRoute({ name: 'myPage', params: { data1: 'message', data2: { data3: [123, 456, 789] } } }) } catch (err) { let message = (err as BusinessError).message let code = (err as BusinessError).code console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`); } }) } .width('100%') .height('100%') } }
-
在当前应用包的oh-package.json5文件中配置依赖。
"dependencies": { "@ohos/library": "file:../library", ... }
-