玩转鸿蒙NXET之组件导航与路由跳转二

07-21 449阅读

页面路由(@ohos.router)

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。本文将从页面跳转、页面返回、页面返回前增加一个询问框和命名路由几个方面介绍Router模块提供的功能。

玩转鸿蒙NXET之组件导航与路由跳转二
(图片来源网络,侵删)

页面跳转与参数接收

页面跳转

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时,通常需要在不同的页面之间跳转,有时还需要将数据从一个页面传递到另一个页面。

方法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",
         ...
      }
      
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]