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

用户26245236817
290 阅读4分钟

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

最后分享一份鸿蒙（HarmonyOS）开发学习指南需要的可以

**关注VX公众号：Android 老皮 **

《鸿蒙（HarmonyOS）开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用（Stage模型）

3、构建第一个ArkTS应用（FA模型）

4、构建第一个JS应用（FA模型）

5、........

图片

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件（Stage模型）

3、应用配置文件概述（FA模型）

4、.......

图片

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、.......

图片

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、......

图片

第五章 UI开发

1.方舟开发框架（ArkUI）概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4.......

图片

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7.......

图片

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17......

图片

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4.......

图片

avatar
文章
阅读
粉丝