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

鸿蒙系统以其独特的分布式架构和跨设备的统一体验而备受瞩目。在这个系统中，页面路由（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模块

import router from '@ohos.router';

3.2. 代码示例

LoginPage.ets

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

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%')
  }
}

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术，这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》：https://qr21.cn/FV7h05

入门必看：https://qr21.cn/FV7h05
1.  应用开发导读(ArkTS)
2.  ……

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全

如何快速入门：https://qr21.cn/FV7h05
1.  基本概念
2.  构建第一个ArkTS应用
3.  构建第一个JS应用
4.  ……

开发基础知识：https://qr21.cn/FV7h05
1.  应用基础知识
2.  配置文件
3.  应用数据管理
4.  应用安全管理
5.  应用隐私保护
6.  三方应用调用管控机制
7.  资源分类与访问
8.  学习ArkTS语言
9.  ……

基于ArkTS 开发：https://qr21.cn/FV7h05
1.  Ability开发
2.  UI开发
3.  公共事件与通知
4.  窗口管理
5.  媒体
6.  安全
7.  网络与链接
8.  电话服务
9.  数据管理
10.  后台任务(Background Task)管理
11.  设备管理
12.  设备使用信息统计
13.  DFX
14.  国际化开发
15.  折叠屏系列
16.  ……