【鸿蒙开发】基础干货篇--7 “一篇带你掌握页面跳转”

系列文章目录

【鸿蒙开发】鸿蒙开发基础干货篇–1
【鸿蒙开发】基础干货篇–2 小白入门手册（内含Dev Eco安装教程和汉化插件安装）
【鸿蒙开发】基础干货篇–3 小白入门手册（内含模拟器保姆级安装使用教程）
【鸿蒙开发】基础干货篇–4 小白入门手册（内含Stage模型工程目录结构和UIAbility 组件详解）
【鸿蒙开发】基础干货篇–5 “一篇带你掌握应用状态”
【鸿蒙开发】基础干货篇–6 “超简单持久化存储PersistentStorage”
【鸿蒙开发】“一篇带你掌握HAP、HAR、HSP”

文章目录

系列文章目录
前言
一、页面路由 (@ohos.router)(不推荐)
二、使用navigation组件跳转
- 1.路由操作
- 2.页面跳转
三、使用基于navigation组件的自定义路由框架跳转
总结

前言

在业务体系庞大或复杂的情况下，通常会将业务拆分成多个子业务模块，单个子业务模块为一个har/hsp。在该场景下，通常存在从主业务入口跳转到不同子页面模块，或从一个子业务模块A页面跳转到另一个子业务模块B页面的需求。如，从应用首页跳转到登录子业务模块页面。

针对不同场景，有三种解决方案，我们在下面为大家分别详细讲解。

一、页面路由 (@ohos.router)(不推荐)

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

1.页面跳转

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

Router模块提供了两种跳转模式，分别是router.pushUrl和router.replaceUrl。

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

import { router } from '@kit.ArkUI';
// 在Home页面中
  router.pushUrl({
    url: 'pages/Detail' // 目标url
  });

router.replaceUrl：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

import { router } from '@kit.ArkUI';
// 在Home页面中
router.replaceUrl({
  url: 'pages/Profile' // 目标url
}

效果示例：
在这里插入图片描述

注意：页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear方法清空历史页面栈，释放内存空间。

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

Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。
Single：单实例模式。如果目标页面的url已经存在于页面栈中，则会将离栈顶最近的同url页面移动到栈顶，该页面成为新建页。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

2.页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。在返回的过程中，可能需要将数据传递给目标页面，这就需要用到数据传递功能。

返回到上一个页面。

import { router } from '@kit.ArkUI';
router.back();

返回到指定页面。

// 返回普通页面
import { router } from '@kit.ArkUI';
router.back({
 url: 'pages/Home'
});

//返回命名路由页面
import { router } from '@kit.ArkUI';
router.back({
  url: 'myPage' //myPage为返回的命名路由页面别名
});

返回到指定页面，并传递自定义参数信息。

import { router } from '@kit.ArkUI';
router.back({
  url: 'pages/Home',
  params: {
    info: '来自Home页'
  }
});

效果示例：
在这里插入图片描述

3.页面返回前增加一个询问框

在开发应用时，为了避免用户误操作或者丢失数据，有时候需要在用户从一个页面返回到另一个页面之前，弹出一个询问框，让用户确认是否要执行这个操作。

为了实现这个功能，可以使用页面路由Router模块提供的两个方法：router.showAlertBeforeBackPage和router.back来实现这个功能。

如果想要在目标界面开启页面返回询问框，需要在调用router.back方法之前，通过调用router.showAlertBeforeBackPage方法设置返回询问框的信息。例如，在支付页面中定义一个返回按钮的点击事件处理函数：

import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

// 定义一个返回按钮的点击事件处理函数
function onBackClick(): void {
  // 调用router.showAlertBeforeBackPage()方法，设置返回询问框的信息
    router.showAlertBeforeBackPage({
      message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容
    });
  // 调用router.back()方法，返回上一个页面
  router.back();
}

效果展示：
在这里插入图片描述

二、使用navigation组件跳转

Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。
一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

Navigation组件主要包含导航页（NavBar）和子页（NavDestination）。导航页由标题栏（Titlebar，包含菜单栏menu）、内容区（Navigation子组件）和工具栏（Toolbar）组成

1.路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

注意：

2.页面跳转

注意事项：
1.主页要被Navigation容器包裹。
2.目标跳转的子页要被NavDestination容器包裹。
3.被@entry修饰的主页要创建一个被@Provide修饰的NavPathStack页面栈对象
4.子页通过 @Consume 继承NavPathStack页面栈对象

主页 >代码如下（示例）：


@Entry 
@Component 
struct NavigationPage { 
 **@Provide('pathStack') pathStack: NavPathStack = new NavPathStack();** 
  build() { 
    Navigation(this.pathStack) { 
      ...
    } 
    .navDestination(this.pageMap) 
  } 
}

子页 >代码如下（示例）：


@Component 
export struct LoginPage { 

  **@Consume('pathStack') pathStack: NavPathStack;** 
 
  build() { 
    NavDestination() { 
    ...
    } 
    .onBackPressed(() => { 
      this.pathStack.pop(); 
      return true; 
    }) 
  } 
}

三、使用基于navigation组件的自定义路由框架跳转

第二种方法各个模块间将存在非常复杂的依赖关系，当模块间跳转需求增多时，甚至会导致多个har/hsp间循环依赖。为了解决模块间的强耦合关系，并且提升页面加载性能，推荐使用自定义路由框架。该方案的整体思路如下：

自定义一个路由管理模块RouterModule，各个需要使用路由功能的模块均依赖此模块。
路由管理模块RouterModule内部定义路由栈NavPathStack，并对NavPathStack进行封装，对外提供路由能力。
在使用Navigation组件时，需将Navigation组件对应的NavPathStack注册到路由管理模块中。通过路由管理模块RouterModule的NavPathStack对路由能力进行控制。
各个路由页面不再提供组件，转为提供@builder封装的构建函数，再通过WrappedBuilder封装进行传递使用。
各个路由页面将模块名称、路由名称、WrappedBuilder封装后的构建函数注册到路由管理模块RouterModule的路由表中。
当路由需要跳转到指定路由时，调用路由管理模块RouterModule的push方法。该方法对指定的模块的路由页面动态导入，并完成路由跳转。

总结

以上就是今天要讲的内容，本文仅仅简单三种页面跳转解决方案使用。大家自行选取学习。晚安啦_{希望大家开开心心有个好梦}

标签：鸿蒙,--,url,模块,跳转,router,路由,页面
From： https://blog.csdn.net/i20021209/article/details/143892087