HarmonyOS 中 Navigation 和 router是一回事吗？

在鸿蒙（HarmonyOS）中，Navigation 组件 并不是一种独立的路由机制，而是一个 UI 导航容器组件 ，用于构建具有导航功能的界面结构（如底部导航栏、侧边栏等）。它的主要职责是管理 同级页面或子组件的切换和布局 ，而非直接处理页面跳转逻辑。不过，开发者通常会结合 @ohos.router 模块和 Navigation 组件共同实现完整的导航功能。

---

1. Navigation 组件的定位与作用

• 功能定位 ：
  Navigation 是 ArkUI 提供的一个 布局容器组件 ，用于实现常见的导航模式（如 Tab 导航、抽屉导航等）。它通过 NavRouter 和 NavDestination 管理子组件的切换。
• 与路由的区别 ：
  • 路由（@ohos.router）：负责页面栈管理、跨页面跳转和参数传递（底层逻辑）。
  • Navigation 组件：负责导航栏的 UI 展示和交互（视觉层），需要与路由配合使用。

---

2. Navigation 组件的典型用法

场景：实现底部 Tab 导航

// main.ets
import router from '@ohos.router';

@Entry
@Component
struct NavigationExample {
  @State activeIndex: number = 0; // 当前选中的 Tab 索引

  build() {
    Navigation() {
      // 底部 Tab 栏
      NavDestination() {
        Column() {
          Text('首页').fontSize(20)
          Button('跳转到详情页')
            .onClick(() => {
              // 通过路由跳转到详情页
              router.pushUrl({ url: 'pages/DetailPage' });
            })
        }
        .width('100%')
        .height('100%')
      }
      .title('首页')
      .icon($r('app.media.home'))

      NavDestination() {
        Column() {
          Text('设置页').fontSize(20)
        }
        .width('100%')
        .height('100%')
      }
      .title('设置')
      .icon($r('app.media.settings'))
    }
    .title('导航示例')
    .mode(NavigationMode.Stack) // 堆栈模式
    .navBarPosition(NavigationPosition.Bottom) // 底部导航栏
    .onNavStateChange((index: number) => {
      // Tab 切换事件
      this.activeIndex = index;
    })
  }
}

代码解析：

1. Navigation 容器 ：包裹所有导航页面（NavDestination）。
2. NavDestination：定义每个 Tab 对应的内容和样式。
3. 路由跳转 ：在 Tab 页面内仍使用 router.pushUrl() 实现跨页面跳转。
4. 导航模式 ：
   • Stack：堆栈模式（默认），适合层级跳转。
   • Split：分屏模式（大屏设备适用）。

---

3. Navigation 与路由的协作关系

职责	Navigation 组件	路由（@ohos.router）
页面跳转	不直接处理跳转，需调用 router API	通过 pushUrl/back 管理跳转
导航栏 UI	提供 Tab、标题栏等视觉元素	无 UI 元素
页面栈管理	不管理页面栈	维护页面栈（前进、后退）
参数传递	不支持直接传参	通过 params 传递 JSON 对象
适用场景	同级页面切换（如 Tab 导航）	跨层级页面跳转（如详情页、表单页）

---

4. 常见误区澄清

误区 1 ：Navigation 可以替代路由

纠正：

• Navigation 仅负责 同级页面的布局和切换，无法处理跨层级跳转或页面栈管理。
• 若需要跳转到其他层级的页面（如从首页跳转到详情页），仍需使用 router.pushUrl()。

误区 2 ：Navigation 自带路由功能

纠正：

• Navigation 的 Tab 切换本质上是组件显隐控制，而非真正的路由跳转。
• 若需要页面生命周期管理（如 onPageShow/onPageHide），仍需依赖 @ohos.router。

---

5. 最佳实践：结合 Navigation 和路由

// 在 Tab 页面内实现路由跳转
Button('跳转到独立页面')
  .onClick(() => {
    router.pushUrl({
      url: 'pages/IndependentPage',
      params: { from: 'Tab1' }
    });
  })

// 返回时处理路由
Button('返回')
  .onClick(() => {
    router.back();
  })

---

总结

• Navigation 组件 是 UI 导航容器，用于构建 Tab 栏、侧边栏等导航结构的界面。
• 路由（@ohos.router） 是 底层跳转逻辑，负责页面栈管理和参数传递。
• 二者需结合使用：Navigation 管理同级页面的布局，路由处理跨层级跳转。