一、Navigation核心定位与功能

1. 多导航模式支持Stack（堆栈模式）：移动端主流模式，单页面显示，通过页面栈管理层级跳转（如A→B→C）。Split（分栏模式）：大屏设备（平板/折叠屏）左右分栏，左侧导航列表 + 右侧详情区，提升信息密度。Auto（自适应模式）：根据设备宽度自动切换布局（≤520vp用Stack，>520vp用Split），实现“一次开发多端部署”。
2. 与Router的协作关系能力NavigationRouter导航UI管理✅ 提供标题栏、工具栏、分栏布局❌ 无UI组件页面栈管理❌ 仅管理同级页面✅ 跨层级跳转 & 页面栈维护传参类型✅ 对象传参（含复杂结构）✅ 对象传参（禁含方法变量）共享元素动画✅ 通过geometryTransition实现❌ 不支持路由拦截✅ setInterception实现权限验证❌ 不支持协作场景：Navigation管理同级页面布局（如Tab切换），Router处理跨层级跳转（如首页→详情页）。

⚙️ 二、多端适配关键技术

1. 自适应布局实现

• 断点监听：通过GridContainer.onBreakpointChange动态响应屏幕尺寸变化，调整布局结构。
• 资源限定符：在resources目录下配置不同设备尺寸资源（如tablet/phone），自动匹配设备。

// 自适应模式配置
Navigation()
  .mode(NavigationMode.Auto) // 自动切换Stack/Split模式
  .onBreakpointChange((breakpoint) => {
    if (breakpoint === 'sm') { /* 小屏设备逻辑 */ }
  })

2. 分栏布局开发技巧

• NavRouter与NavDestination绑定：NavRouter必须包含两个子组件，第二个必须是NavDestination。示例：左侧导航列表 + 右侧内容区。NavRouter() { ListItem() { /* 导航项UI */ } // 第一个子组件：导航区 NavDestination() { // 第二个子组件：内容区 Text("详情页内容") }.title("详情页") }

3. 手势冲突解决

• 嵌套交互组件（如地图+面板）时，需为手势添加.simultaneousGesture避免冲突。

🌐 三、跨包路由实现（高级能力）

1. 跨模块跳转流程

• Step 1：各模块（Hap/Hsp/Har）在module.json5声明路由表路径：{ "routerMap": "$profile:route_map" }
• Step 2：在src/main/resources/base/profile/创建route_map.json，配置页面映射：{ "routerMap": [ { "name": "DetailPage", "pageSourceFile": "src/main/ets/pages/DetailPage.ets", "buildFunction": "DetailPageBuilder" // @Builder函数名 } ] }
• Step 3：跳转时通过NavPathStack.pushPath指定目标页面名：this.stack?.pushPath({ name: 'DetailPage' })

2. 跨包传参与生命周期

• 参数传递：目标页面通过NavDestinationContext.getConfigInRouteMap()获取路由表配置的data字段。
• 依赖管理：主模块需在oh-package.json5中声明子模块依赖，编译时需按序编译子模块。

四、开发避坑指南

1. 预览器限制路由表跳转需在本地模拟器测试，预览器可能无法生效。
2. 导航项约束NavRouter的子组件数必须为2，且第二个必须是NavDestination，否则跳转失效。
3. 传参陷阱Navigation传参需依赖NavDestinationContext，复杂对象需序列化。
4. 性能优化使用NavPathStack.removeByName()清理无用页面栈，避免内存泄漏。

五、最佳实践与场景推荐

性能提示：分栏模式（Split）适合平板/车机，单页模式（Stack）节省移动端内存；跨包路由跳转前预加载子模块资源，减少卡顿。

总结

Navigation 是鸿蒙ArkUI的高级导航容器，核心价值在于：

1. 多端自适应：通过Auto模式自动适配手机/平板/折叠屏，减少冗余代码。
2. 跨包路由：支持Hap/Hsp/Har模块间无缝跳转，助力大型应用模块化开发。
3. 交互增强：内置手势冲突处理、共享元素动画、路由拦截等进阶能力。

开发建议：

• 优先使用路由表配置跳转逻辑，提升可维护性；
• 结合Router处理跨层级跳转，Navigation专注同级页面布局管理；
• 大屏场景活用分栏模式，显著提升信息展示效率。