【页面路由导航】三步实现页面跳转的完整示例-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利

原创已于 2025-09-17 22:01:02 修改 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #鸿蒙 #HarmonyOS #HarmonyOS NEXT

于 2025-09-17 21:33:51 首次发布

《精通HarmonyOS NEXT:鸿蒙App开发入门》专栏收录该内容

2 篇文章

订阅专栏

本文为《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利，对本书感兴趣的同学习可以点击以下链接进行购买，或者参加班级共同学习，点击链接可进入（华为官方活动）

开始正题

页面路由是App页面跳转必用的技术，在鸿蒙系统中，有多种方案可实现。

而通过Navigation的方式实现页面路由是华为官方当下推荐的方式。Navigation是路由容器组件，一般作为首页的根容器。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。

Navigation组件主要包含导航栏（NavBar）和子页（NavDestination），子页通过栈结构管理（存在NavPathStack中）。

通过Navigation组件实现页面之间的跳转，主要分为三步

第一步：导航页面（主页面）如下

@Entry
@Component
struct Index {
  // 创建NavPathStack管理导航栈
  pageStack: NavPathStack = new NavPathStack();
  build() {
    // 在Navigation容器中实现主页面的内容
    Navigation(this.pageStack) {
      Column() {
        // 父视图实现，打开子视图，并传参数
        Button('nav pushPath SecondPage_Nav')
          .onClick(() => {
            this.pageStack.pushPathByName('secondPageNav' , null); // 'secondPageNav'在第三步中定义
          })
      }
    }
    .hideTitleBar(true)
  }
}

第二步：实现子页面

@Builder
export function SecondPageBuilder(name: string, param: Object) {
  SecondPage_Nav()
}

@Entry
@Component
struct SecondPage_Nav {
  pageStack:NavPathStack|null = null;
  build() {
    NavDestination() {
      Button('nav pop Parent')
        .onClick(() => {
          this.pageStack!!.pop()
        })
    }
    .onReady((context: NavDestinationContext) => {
      this.pageStack = context.pathStack;  // 记录上级页面的pageStack
    })
  }
}

第三步：配置路由表

Navigation支持使用系统路由表的方式进行动态路由。各业务模块中需要独立配置route_map.json文件，在触发路由跳转时，需要通过NavPathStack提供的路由方法，传入需要路由的页面配置名称。

// resources/base/profile/route_map.json 文件

{
  "routerMap": [
    {
      "name": "secondPageNav",                                   // 主页面跳转子页面时使用
      "pageSourceFile": "src/main/ets/pages/SecondPage_Nav.ets", // 子页面的源代码文件
      "buildFunction": "SecondPageBuilder",    // 需要与子页面的实现 @Builder描述的export function 名一样。
      "data": {
        "description": "this is pageTwo"
      }
    }
  ]
}

注意：新建的工程，默认没有配置route_map.json文件，需要在在跳转目标模块（子页面）的module.json5配置文件中添加路由表配置

// module.json5 文件

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

这三步完成后，通过页面路由导航实现页面跳转的主体代码及配置已经完成，页面之间可以实现自由的跳转及切换了。