系列拓展
【鸿蒙开发】 一篇带你掌握“语音转文字技术” --内附详细代码
【ArkTS】“一篇带你掌握TaskPool与Worker两种多线程并发方案”
前言
在业务体系庞大或复杂的情况下，通常会将业务拆分成多个子业务模块，单个子业务模块为一个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方法。该方法对指定的模块的路由页面动态导入，并完成路由跳转。
总结
以上就是今天要讲的内容，本文仅仅简单三种页面跳转解决方案使用。大家自行选取学习。晚安啦希望大家开开心心有个好梦
