关于官方推荐的组件级路由 Navigation 的使用心得体会

作者：GeorgeGcs

2025-06-25
上海
本文字数：1637 字
阅读完需：约 5 分钟

关于官方推荐的组件级路由 Navigation 的使用心得体会

##鸿蒙开发能力 ##HarmonyOS SDK 应用服务 ##鸿蒙金融类应用（金融理财 #

最近经历了一次应用架构更新，对于路由的概念有了深刻的认识。从两年前开发 OpenHarmony 开始，基本都是使用 router 路由和 window 窗口来控制模块之间的切换。整个页面逻辑的控制非常耦合，并且笨重不变。

随着 API 的迭代更新，目前华为官方推荐使用 Navigaiton 来替换 router。

Navigaiton 这个东西，方便就方便于它的定位，组件级别。而我们的老东西 router 是页面级别。

灵活性一目了然，我们可以将页面一部分组件，进行路由控制切换。
并且我们可以对路由的删除进行管理，而 router 是没有 remove 只能替换，并且替换路由函数，是强制没有页面转场动画的效果。
最大的优势在于系统提供了自动扩容的容器控件，并且支持分栏效果，在折叠屏手机上的适配会非常方便。

Navigation 如何使用？

首先 Navigation 是个容器，并不是直接对标 router 一样来使用的。我们可以理解成，这家伙是个变形金刚，它是由三部分组成，首先是主页面容器 Navigation，其次是子页面容器 NavDestination，之后才是对标 router 的操作对象 NavPathStack

（1）创建主页界面

@Entry@Componentstruct MainPage {  @State message: string = 'Hello World';  // 创建一个页面栈对象并传入Navigation  pageStack: NavPathStack = new NavPathStack()
  build() {    Navigation(this.pageStack) {      // 页面布局      Row() {        Column() {          Text(this.message)            .fontSize(50)            .fontWeight(FontWeight.Bold)            .onClick(()=>{              // 跳转到子页面              this.pageStack.pushDestination({                name: "OnePage",              }, false); //该false表示不需要转场动画，默认是有的            })        }        .width('100%')      }      .height('100%')    }    // 分为三种模式，（默认）自动NavigationMode.Auto，单页面NavigationMode.Stack和分栏NavigationMode.Split    .mode(NavigationMode.Stack)
  }}

复制代码

（2）创建子页界面


// 跳转页面入口函数@Builderexport function OnePageBuilder() {  OnePage()}
@Entry@Componentstruct OnePage {  private TAG: string = "OnePage";  @State message: string = 'Hello World';  pathStack: NavPathStack = new NavPathStack();
  build() {    NavDestination() {      Row() {        Column() {          Text(this.message)            .fontSize(50)            .fontWeight(FontWeight.Bold)        }        .width('100%')      }      .height('100%')    }.onShown(()=>{      console.log(this.TAG, "OnePage onShown");    })     .onReady((context: NavDestinationContext) => {         this.pathStack = context.pathStack;    })  }}

复制代码

（3）配置路由表

{  "routerMap": [    {      "name": "OnePage",      "pageSourceFile": "src/main/ets/pages/Navigation/OnePage.ets",      "buildFunction": "OnePageBuilder",      "data": {        "description" : "this is PageOne"      }    }  ]}

复制代码

特别注意的是，需要配置路由表的路径到 module.json5 里面，要不然跳转不了。特别注意的是，需要配置路由表的路径到 module.json5 里面，要不然跳转不了。特别注意的是，需要配置路由表的路径到 module.json5 里面，要不然跳转不了。主要的话说三遍！

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

复制代码

从 API version 12 开始，Navigation 支持使用系统路由表的方式进行动态路由。各业务模块（HSP/HAR）中需要独立配置 router_map.json 文件，在触发路由跳转时，应用只需要通过 NavPactStack 提供的路由方法，传入需要路由的页面配置名称，此时系统会自动完成路由模块的动态加载、页面组件构建，并完成路由跳转，从而实现了开发层面的模块解耦。

发布于: 刚刚阅读数: 4

GeorgeGcs

关注

路漫漫其修远兮，吾将上下而求索。 2024-12-24 加入

鸿蒙创作先锋，华为HDE专家，鸿蒙讲师，作者。目前任职鸿蒙应用架构师。历经腾讯，宝马，研究所，金融。待过私企，外企，央企。深耕大应用开发领域十年。 OpenHarmony，HarmonyOS，Flutter，H5，Android，IOS。

发布

暂无评论

创作场景

关于官方推荐的组件级路由 Navigation 的使用心得体会

关于官方推荐的组件级路由 Navigation 的使用心得体会

Navigation 如何使用？

GeorgeGcs

评论