article/006/index.md · qincji/ZeroOneApp

# [第6篇：Navigation系统路由表（推荐）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5#系统路由表)

> 自定义的路由模块太复杂，太难用了，而API12提供了系统的路由表注册！非常简单就能实现我们的路由功能。

## 1.使用系统路由表实现页面之间的跳转

### 1.1.在跳转目标模块的配置文件module.json5添加路由表配置：

> 可以是module，也可以是entry。我们在项目的entry和login模块都加上

```c
  {
    "module" : {
      "routerMap": "$profile:route_map"
    }
  }
```

### 1.2.在工程resources/base/profile中创建route_map.json文件【login模块为例】，添加如下配置信息：

```c
 {
  "routerMap": [
    {
      "name": "LoginPage",
      "pageSourceFile": "src/main/ets/pages/LoginPage.ets",
      "buildFunction": "RegisterBuilder",
      "data": {
        "description" : "this is LoginPage"
      }
    }
  ]
}
```

配置说明如下：

|配置项	| 说明 |
| --- | --- |
|name	| 跳转页面名称。|
|pageSourceFile| 	跳转目标页在包内的路径，相对src目录的相对路径。|
|buildFunction	|跳转目标页的入口函数名称，必须以@Builder修饰。|
|data	|应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。|

### 1.3.在LoginPage页面，添加`RegisterBuilder`注册方法：

```c
  // 跳转页面入口函数
  @Builder
  export function RegisterBuilder() {
    LoginPage()
  }

@Component
  struct LoginPage {
    pathStack: NavPathStack = new NavPathStack()

build() {
      NavDestination() {
      }
      .onReady((context: NavDestinationContext) => {
         this.pathStack = context.pathStack
      })
    }
  }

```

### 1.4.通过pushPathByName等路由接口进行页面跳转。

```c
pageStack : NavPathStack = new NavPathStack();
 build() {
      Navigation(this.pageStack){
      }.onAppear(() => {
        this.pageStack.pushPathByName("LoginPage", null, false);
      })
      // .navDestination(this.pageMap)//注意：此时Navigation中可以不用配置navDestination属性
      .hideNavBar(true)
    }
```

## 2.重新整理项目

### 2.1.版本要求

API12（beta1）及以上提供的能力。`build-profile.json5`配置：

```c
 "compileSdkVersion": "5.0.0(12)",
 "compatibleSdkVersion": "5.0.0(12)",
```

### 2.2.移除`router`模块，以及相关引用。

### 2.3.增加`RouterUtil`简单处理

```c
export class RouterUtil {
  static navPathStack: NavPathStack = new NavPathStack();
  static routerStack: Array<string> = new Array();

public static push(name: string, parm: object | undefined = undefined,
    callback: Callback<PopInfo> | undefined = undefined) {
    RouterUtil.routerStack.push(name);
    RouterUtil.navPathStack.pushPathByName(name, parm, callback, true)
  }

public static replace(name: string, parm: object | undefined = undefined) {
    RouterUtil.routerStack.pop();
    RouterUtil.routerStack.push(name);
    RouterUtil.navPathStack.replacePathByName(name, parm, true)
  }

public static pop(result?: Object) {
    if (result !== undefined) {
      RouterUtil.navPathStack.pop(result, true)
    } else {
      RouterUtil.navPathStack.pop(true)
    }
  }

public static popHome(){
    RouterUtil.routerStack.length = 0;
    RouterUtil.navPathStack.clear()
  }
}
```

### 2.4.具体可以看demo，tag：006。

**到这里，所有的内容已经结束了！本章的完整源码已经上传到gitee了：[鸿蒙应用0-1开发](https://gitee.com/qincji/ZeroOneApp)。**

qincji/ZeroOneApp

About

Releases

Contributors

Language(Optional)

Activities