鸿蒙HarmonyOS开发:Navigation路由导航功能和实践例子解析

在这里插入图片描述

代码示例：

在HarmonyOS开发中，Navigation路由导航功能是实现页面间跳转的核心机制。以下是Navigation路由导航功能的详细例子和实践指南：

1. Navigation组件基础

Navigation组件是HarmonyOS中用于页面路由导航的根视图容器，支持单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。它适用于模块内和跨模块的路由切换，并能自动适配不同尺寸的设备显示。

2. 设置页面显示模式

Navigation组件通过mode属性设置页面的显示模式：

自适应模式：默认模式，当页面宽度大于等于一定阈值时，采用分栏模式，反之采用单栏模式。
```
Navigation() {  }.mode(NavigationMode.Auto)
```

单页面模式：

Navigation() {  }.mode(NavigationMode.Stack)

分栏模式：

Navigation() {  }.mode(NavigationMode.Split)

3. 路由操作

Navigation路由操作基于页面栈NavPathStack提供的方法进行。每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。

页面跳转

普通跳转：

this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })

带返回回调的跳转：

this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => { console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))});

带错误码的跳转：

this.pageStack.pushDestination({name: "PageOne", param: "PageOne Param"}).catch((error: BusinessError) => { console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`); });

4. 跨包动态路由

动态路由设计旨在解决多个模块间复用相同的业务逻辑，实现各业务模块间的解耦，并支持路由功能的扩展与整合。

系统路由表：从API version 12开始，Navigation支持使用系统路由表的方式进行动态路由。各业务模块中需要独立配置router_map.json文件，在触发路由跳转时，系统会自动完成路由模块的动态加载、页面组件构建，并完成路由跳转。
```
{
  "module": {
    "routerMap": "$profile:route_map"
  }
}
```
自定义路由表：开发者可以通过自定义路由表的方式来实现跨包动态路由，具体实现方法请参考Navigation自定义动态路由示例。

5. 实践例子

以下是一个简单的Navigation路由导航实践例子：

@Entry@Component
struct Index {
  pageStack: NavPathStack = new NavPathStack();
  build() {
    Navigation(this.pageStack) {
      Column() {
        Button('Push PageOne').onClick(() => {
          this.pageStack.pushPath({ name: 'pageOne' });
        });
      }
    }.title("Navigation").mode(NavigationMode.Stack);
  }
}