第6篇：HarmonyOS 鸿蒙Next Navigation系统路由表（推荐）
<markdown _ngcontent-dxl-c237="" class="markdownPreContainer">

第6篇：Navigation系统路由表（推荐）

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

• 第1篇：鸿蒙APP开发怎么样开始？
• 第2篇：如何使用Navigation+tab搭建路由页面？
• 第3篇：手把手教你如何实现对Navigation路由框架的封装！
• 第4篇：对话框是每个项目的基础，那么禁止系统返回的对话框应该如何实现呢？
• 第5篇：实现沉浸式效果

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

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

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

  {
    "module" : {
      "routerMap": "$profile:route_map"
    }
  }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

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

 {
  "routerMap": [
    {
      "name": "LoginPage",
      "pageSourceFile": "src/main/ets/pages/LoginPage.ets",
      "buildFunction": "RegisterBuilder",
      "data": {
        "description" : "this is LoginPage"
      }
    }
  ]
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

配置说明如下：

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

  // 跳转页面入口函数
  [@Builder](/user/Builder)
  export function RegisterBuilder() {
    LoginPage()
  }
@Component
struct LoginPage {
pathStack: NavPathStack = new NavPathStack()
build() {
  NavDestination() {
  }
  .onReady((context: NavDestinationContext) => {
     <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.pathStack = context.pathStack
  })
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

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

pageStack : NavPathStack = new NavPathStack();
 build() {
      Navigation(this.pageStack){
      }.onAppear(() => {
        this.pageStack.pushPathByName("LoginPage", null, false);
      })
      // .navDestination(this.pageMap)//注意：此时Navigation中可以不用配置navDestination属性
      .hideNavBar(true)
    }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

2.重新整理项目

2.1.版本要求

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

 "compileSdkVersion": "5.0.0(12)",
 "compatibleSdkVersion": "5.0.0(12)",
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

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

2.3.增加RouterUtil简单处理

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()
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

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

到这里，所有的内容已经结束了！本章的完整源码已经上传到gitee了：鸿蒙应用0-1开发。