目录
- 前言
- 路由容器Navigation
- Navigation组成
- 路由跳转操作
- Navigation下的页面生命周期
- 最后
前言
众所周知，HarmonyOS作为华为推出的新一代操作系统，其开发框架提供了全新的能力和组件，以支持跨平台应用开发，越来越多的开发者加入到鸿蒙应用开发中，而在HarmonyOS的应用开发中，HarmonyOS提供了一套全新的开发框架和API，路由容器Navigation扮演着至关重要的角色，它负责页面的跳转和导航控制，是应用组件化开发中不可或缺的一部分。那么这篇文章，就来详细介绍路由容器Navigation的使用方法，并通过具体的示例源码，帮助大家深入了解和学习使用。
路由容器Navigation
先来回顾一下Navigation概念，其实在HarmonyOS开发中，Navigation是ArkUI中中一个用于管理页面路由的容器组件，它允许开发者定义应用中的页面路径，并实现页面之间的跳转，它一般作为首页的根容器，适用于模块内和跨模块的路由切换，最重要的是它支持一次开发，多端部署场景。Navigation的设计理念与Web开发中的路由机制相似，但专为HarmonyOS的架构和性能要求定制，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果，是鸿蒙官方推荐的导航组件（相比于Router，Navigation的支持面更广，所以建议大家选择Navigation）。
Navigation的组成
Navigation组件主要包含导航页(NavBar)和子页(NavDestination)，其中导航页由标题栏(Titlebar，包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，而且导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果，可以用于根控制器实现页面的跳转和传值，同时可以实现系统或自定义标题栏、导航Item等。简答概括，如下所示。
Navigation组件主要包含导航页(NavBar)、子页(NavDestination)两部分组成。其中，导航页包含以下三个部分：
- 标题栏(Titlebar，包括菜单栏menu)：通过title属性来设置标题；
- 内容区(Navigation子组件)：默认首页显示导航内容或非首页显示，二者通过路由进行切换；
- 工具栏(Toolbar)：通过toolbarConfiguration实现对工具栏的配置。
另外就是Navigation组件通过mode属性设置页面的显示模式，Navigation组件显示模式分为三种：单页面模式、自适应模式和分栏模式。
1、单页面模式
先来分享一下单页面模式页面示意图，具体如下所示：
根据上图的单页面模式布局示意图，左边为导航页，右边为子页，可以通过路由转换实现页面来回的切换跳转。根据上面的流程图，这里着重分享Navigation组件在单页面模式的三个知识点：标题栏、菜单栏、工具栏。
（1）标题栏
标题栏在界面顶部，用于呈现界面名称和操作入口，Navigation组件通过titleMode属性设置标题栏模式，标题栏模式分为Mini模式和Full模式。
Mini模式：普通型标题栏，用于一级页面不需要突出标题的场景。
Navigation() {
// 详细代码
...
}
.titleMode(NavigationTitleMode.Mini)
Full模式：强调型标题栏，用于一级页面需要突出标题的场景。
Navigation() {
// 详细代码
...
}
.titleMode(NavigationTitleMode.Full)
（2）菜单栏
菜单栏位于Navigation组件的右上角，开发者可以通过menus属性进行设置，其中menus支持Array和CustomBuilder两种参数类型。在使用Array类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
let TooTmp1: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooTmp2: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_search.svg", 'action': ()=> {}}
let TooTmp3: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_add.svg", 'action': ()=> {}}
Navigation() {
// 详细代码
...
}
.menus([
TooTmp1,
TooTmp2,
TooTmp3
])
（3）工具栏
工具栏位于Navigation组件的底部，作为开发者，我们可以通过toolbarConfiguration属性进行设置，需要注意的是该属性需要传入一个Toolbarltem构成的数组。
let TooTmp1: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooTmp2: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooTmp3: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooBar: ToolbarItem[] = [TooTmp1,TooTmp2,TooTmp3]
Navigation() {
// 详细代码
...
}
.toolbarConfiguration(TooBar)
2、自适应模式
关于自适应模式，其实Navigation组件默认为自适应模式，这时候的mode属性为NavigationMode.Auto。在自适应模式下，当页面宽度大于等于一定阈值的时候，Navigation组件采用分栏模式，反之采用单栏模式。
Navigation() {
// 详细代码
...
}
.mode(NavigationMode.Auto)
3、分栏模式
先来看一下分栏模式示意图，具体如下所示：
关于分栏模式，其实就是将mode属性设置为NavigationMode.Split，Navigation组件即可设置为分栏显示模式。
Navigation() {
// 详细代码
...
}
.mode(NavigationMode.Split)
路由跳转操作
不用多讲想必大家也清楚，路由跳转是Navigation的核心功能之一，在HarmonyOS开发中，实现页面跳转的大概步骤如下所示：
- 定义路由：在应用的配置文件中定义页面的路由信息。
- 创建导航器实例：在需要进行页面跳转的地方创建导航器实例。
- 执行路由跳转：使用导航器的navigate方法执行页面跳转。
其实Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面，其中主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。（根据鸿蒙官方文档可知，从API version 12开始，页面栈允许被继承，我们可以在派生类中自定义属性和方法，也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。）简单的示例代码如下所示：
@Entry
@Component
struct Index {
// 创建一个页面栈对象并传入Navigation
pageStack: NavPathStack = new NavPathStack()
build() {
Navigation(this.pageStack) {
}
.title('MyPage')
}
}
1、跳转操作
关于跳转操作，其实是NavPathStack通过Push相关的接口去实现页面跳转的功能，主要分为三类:普通跳转、带返回回调的跳转、带错误码的跳转。
（1）普通跳转，主要是通过页面的name去跳转，并可以携带param。
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")
（2）带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
console.log('Pop page name is: ' + popInfo.data.name + ', result: ' + JSON.stringify(popInfo.result))
});
（3）带错误码的跳转，跳转结束会触发异步回调，返回错误码信息，简单的示例代码如下所示：
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});
2、返回操作
关于返回操作，其实是NavPathStack通过Pop相关接口去实现页面返回功能，简单的示例代码如下所示：
// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()
3、替换操作
关于替换操作，NavPathStack通过Replace相关接口去实现页面替换功能，简单的示例代码如下所示：
// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")
4、删除操作
关于删除操作，其实是NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能，简单的示例代码如下所示：
// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])
5、获取参数操作
关于参数获取操作，是NavPathStack通过Get相关接口去获取页面的一些参数，简单的示例代码如下所示：
// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")
6、路由拦截操作
关于路由拦截操作，NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调，需要注意的是该方法需要传入一个NavigationInterception对象，其中该对象包含三个回调函数，具体如下所示：
**需要注意：**上面的三个回调函数，无论是哪个回调，在进入回调的时候页面栈都已经发生了变化。
作为鸿蒙开发者，我们可以在willShow回调中通过修改路由栈来实现路由拦截重定向的能力，简单的示例代码如下所示：
this.pageStack.setInterception({
willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
operation: NavigationOperation, animated: boolean) => {
if (typeof to === "string") {
console.log("target page is navigation home page.");
return;
}
// 将跳转到PageTwo的路由重定向到PageOne
let target: NavDestinationContext = to as NavDestinationContext;
if (target.pathInfo.name === 'PageTwo') {
target.pathStack.pop();
target.pathStack.pushPathByName('PageOne', null);
}
}
})
Navigation下的页面生命周期
接下来再来分享一下Navigation下的页面生命周期，Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事件的形式开放，在Navigation的控制下，页面的生命周期管理也有所不同。根据鸿蒙官方的释义，Navigation下的页面生命周期大致可分为三类：自定义组件生命周期、通用组件生命周期和自有生命周期（需要说明的是，aboutToAppear和aboutToDisappear是自定义组件的生命周期。如果NavDestination外层包含自定义组件时则存在；OnAppear和OnDisappear是组件的通用生命周期，剩下的六个生命周期为NavDestination独有）。
其中，我们需要根据页面的生命周期状态来管理页面资源，优化应用性能，具体详细的页面生命周期如下图所示：
- aboutToAppear：在创建自定义组件后，执行其build()函数之前执行（也就是NavDestination创建之前），允许在该方法中改变状态变量，更改将在后续执行build()函数中生效。
- onWillAppear：NavDestination创建后，挂载到组件树之前执行，在该方法中更改状态变量会在当前帧显示生效。
- onAppear：通用生命周期事件，NavDestination组件挂载到组件树时执行。
onWillShow：NavDestination组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。 - onShown：NavDestination组件布局显示之后执行，此时页面已完成布局。
- onWillHide：NavDestination组件触发隐藏之前执行（应用切换到后台不会触发）。
- onHidden：NavDestination组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台）。
- onWillDisappear：NavDestination组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈）。
- onDisappear：通用生命周期事件，NavDestination组件从组件树上卸载销毁时执行。
- aboutToDisappear：自定义组件析构销毁之前执行，不允许在该方法中改变状态变量。
这里分享一个简单的示例代码，具体如下所示：
@Component
export struct LoginPageView{
@Consume('pageInfo') pageStack : NavPathStack;
aboutToAppear(): void {...}
build() {
NavDestination(){...}.hideTitleBar(true)
.onReady(()=>{})
.onAppear(()=>{...})
.onShown(()=>{...})
.onHidden(()=>{...})
.onDisAppear(()=>{...})
}
aboutToDisappear(): void {...}
}
最后还是要啰嗦一句，鸿蒙官方强力推荐开发者使用Navigation，原先使用Router的应用建议尽快切换成Navigation，避免由于页面的持续增加导致迁移工作量变大，所以说我们在实际鸿蒙开发中首选Navigation路由容器。
最后
通过本文的详细介绍，我们可以看到HarmonyOS中的Navigation是一个功能丰富且灵活的路由管理组件，详细介绍了HarmonyOS中路由容器Navigation的使用方法，包括导航器的创建和路由的操作、页面跳转的执行，不仅简化了页面跳转的实现，还提供了对页面生命周期的精细控制。所以说掌握Navigation的使用对于HarmonyOS应用开发者来说至关重要，通过具体的示例源码，我们可以看到Navigation在HarmonyOS应用开发中的实际应用。随着HarmonyOS生态的不断发展，我们可以看到Navigation将会发挥越来越重要的作用，尤其是在实际开发过程中的具体应用。作为开发者，我们应当深入理解并熟练运用Navigation，以构建更加流畅和高效的用户体验。让我们共同期待HarmonyOS带来的无限可能，最后也希望这篇文章能帮助开发者更好地理解和使用HarmonyOS的Navigation相关的内容。
![[Meachines] [Easy] Sense PFSense防火墙RCE](https://img-blog.csdnimg.cn/img_convert/fe637a0c56567c4776d61f075589201e.jpeg)
