深入解析鸿蒙系统的页面路由（Router）机制

2024-07-20 21:19:33 浏览数 (1)

鸿蒙系统以其独特的分布式架构和跨设备的统一体验而备受瞩目。在这个系统中，页面路由（Router）机制是连接应用各页面的关键组成部分。本文将深入探讨鸿蒙系统的页面路由，揭示其工作原理、特点以及在应用开发中的实际应用。

1. 实现

1.1. 两种跳转模式

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

  • router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
  • router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

1.2. 两种实例模式

Router模块提供了两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

  • Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。
  • Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。

2. 页面路由的工作原理

鸿蒙系统的页面路由基于一种轻量级的栈式管理结构。每个页面都有一个唯一的标识符，当页面切换时，页面路由根据标识符入栈或出栈，实现页面的切换和管理。

3. 具体实现

3.1. 引入Router模块

代码语言：ts复制
import router from '@ohos.router';

3.2. 代码示例

LoginPage.ets

代码语言：ts复制
import router from '@ohos.router';
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct LoginPage {
  @State message: string = 'Login Page'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)


        Button('跳转1')
          .width(100)
          .margin({ top: 10 })
          .onClick(() => {
            router.pushUrl({ url: 'pages/HomePage', params: { msg: 'hello world，我是上一个页面传递过来的' } },
              router.RouterMode.Standard, (err) => {
                if (err) {
                  promptAction.showToast({ message: `跳转失败：code is ${err.code}, message is ${err.message}` })
                  return;
                } else {
                  promptAction.showToast({ message: `跳转成功` })
                }

              }
            )

          })

        Button('跳转2')
          .width(100)
          .margin({ top: 10 })
          .onClick(() => {
            router.pushUrl({ url: 'pages/HomePage' },
              router.RouterMode.Single, (err) => {
                if (err) {
                  promptAction.showToast({ message: `跳转失败：code is ${err.code}, message is ${err.message}` })
                  return;
                } else {
                  promptAction.showToast({ message: `跳转成功` })
                }

              }
            )

          })

        Button('跳转3')
          .width(100)
          .margin({ top: 10 })
          .onClick(() => {
            router.replaceUrl({ url: 'pages/HomePage' },
              router.RouterMode.Single, (err) => {
                if (err) {
                  promptAction.showToast({ message: `跳转失败：code is ${err.code}, message is ${err.message}` })
                  return;
                } else {
                  promptAction.showToast({ message: `跳转成功` })
                }

              }
            )
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

HomePage.ets

代码语言：ts复制
import router from '@ohos.router';
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct HomePage {
  @State message: string = 'HomePage'
  @State msg: string = '';

  onPageShow() {
    // 获取传递过来的参数对象
    const params = router.getParams();
    if (params != null && this.msg != null) {
      // 获取info属性的值
      this.msg = params['msg'];
    } else {
      this.msg = '没有参数传递过来'
    }
  }

  build() {
    Row() {
      Column() {

        Text(this.msg)
          .fontSize(20)

        Button('返回上一页').onClick(() => {
          router.back()
        })

        Button('返回指定页面')
          .margin({ top: 10 })
          .onClick(() => {
            router.back({
              url: 'pages/Index'
            })
          })

        Button('页面返回询问框')
          .margin({ top: 10 })
          .onClick(() => {

            // 调用router.showAlertBeforeBackPage()方法，设置返回询问框的信息
            try {
              router.showAlertBeforeBackPage({
                message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容
              });
            } catch (err) {
              console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);
            }
            router.back()
          })


        Button('页面返回询问框自定义')
          .margin({ top: 10 })
          .onClick(() => {

            // 弹出自定义的询问框
            promptAction.showDialog({
              message: '您还没有完成支付，确定要返回吗？',
              buttons: [
                {
                  text: '取消',
                  color: '#FF0000'
                },
                {
                  text: '确认',
                  color: '#0099FF'
                }
              ]
            }).then((result) => {
              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) => {
              console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
            })
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

写在最后