第一章 为什么官方推荐 NavigationHarmonyOS NEXT 从 API9 开始推出Navigation 组件级路由到了 HarmonyOS 5官方几乎所有新的 Demo、Sample、模板工程都开始采用 Navigation而传统的ohos.router更多处于兼容状态。很多开发者刚接触 Navigation 时都会产生疑问Router 用得好好的为什么还要学习 NavigationNavigation 为什么代码这么复杂NavDestination 到底是什么NavPathStack 为什么不能省略为什么官方一直强调“组件级路由”其实这背后反映的是 HarmonyOS UI 架构的一次重要升级。理解了官方设计思路你会发现 Navigation 并不是 Router 的升级版而是一套全新的页面组织方式。1.1 Router 的发展历史在 HarmonyOS 早期版本中官方提供的页面跳转方案是ohos.router例如import router from ohos.router router.pushUrl({ url: pages/DetailPage })返回页面router.back()这种方式与 Android Activity 跳转、Vue Router、小程序页面栈等非常相似。开发成本低上手简单因此很多开发者都采用这种方案。一个典型的页面跳转流程如下首页 ↓ 商品页 ↓ 详情页 ↓ 支付页 ↓ 订单页每次调用pushUrl()都会创建一个新的页面实例并压入页面栈。1.2 Router 存在的问题随着项目越来越复杂传统 Router 的缺点逐渐显现。1页面切换成本高Router 的核心思想是切换整个 Page。例如PageA ↓ 销毁 ↓ PageB整个页面重新创建。意味着UI重新构建生命周期重新执行页面重新加载数据重新绑定如果页面比较复杂切换成本就会越来越高。例如商城首页Banner Grid Tabs List 商品推荐 广告整个页面可能包含几百个组件。每次跳转都会重新构建。2组件无法复用Router 跳转的是Page而不是Component例如商品详情ProductDetail如果想在DialogBottomSheetSplitPadPC再次展示这一块内容。Router 无法做到。只能重新写一个页面。于是项目越来越臃肿。3无法支持复杂布局如今 HarmonyOS 已经支持手机折叠屏平板PC智慧屏不同设备的布局差异非常大。例如 Pad--------------------------- 列表 | 详情 | | ---------------------------手机列表 ↓ 点击 ↓ 详情Router 只能PageA ↓ PageB无法同时显示两个页面。这也是官方重新设计 Navigation 的重要原因之一。4页面与业务耦合严重传统 Routerrouter.pushUrl({ url: pages/UserPage })业务代码直接依赖pages/UserPage一旦目录变化pages/ ↓ mine/ ↓ UserPage所有地方都需要修改。大型项目维护成本很高。5不利于组件化开发HarmonyOS 目前越来越强调HAR ↓ HSP ↓ Module ↓ Feature如果还是router.pushUrl()那么业务模块之间必须知道pages/xxx模块之间无法真正解耦。1.3 Navigation 的出现于是 HarmonyOS 推出了Navigation很多人第一次看到它Navigation(pathStack)都会疑惑为什么这么麻烦实际上它解决的是页面管理问题。而不是页面跳转问题。这是两种完全不同的设计理念。1.4 什么叫组件级路由官方一直强调Navigation 是组件级路由。很多人理解成组件跳转。其实这是错误的。真正含义是页面不再是最小单位。而是Navigation ↓ NavDestination ↓ Component例如传统 RouterPageA ↓ PageB ↓ PageCNavigationNavigation ↓ DestinationA ↓ DestinationB ↓ DestinationC注意Destination 本身就是一个组件。它不是一个独立的 Ability。也不是传统意义上的 Page。因此官方称之为组件级路由。1.5 Navigation 的设计思想Navigation 的核心思想只有一句话页面也是组件。以前Button Text Image Column Row都是组件。而现在DetailPage也只是一个组件。整个页面其实就是Navigation { Home() Detail() User() }Navigation 根据当前路由状态决定显示Home()还是Detail()本质上只是组件树发生变化。而不是整个 Page 被销毁。这也是为什么 Navigation 的动画更加流畅。1.6 Navigation 与 Router 的本质区别很多教程只是列一个对比表RouterNavigation页面路由组件路由实际上两者最大的区别并不是 API而是架构思想。Router 更像一个“页面切换器”每次导航都会创建或销毁完整页面开发者主要关注“跳到哪个页面”。Navigation 更像一个“页面容器”它维护的是一组NavDestination组件。开发者关注的不再是“跳转”而是“当前路由栈应该呈现哪些内容”。这种变化带来了几个重要优势页面可以像普通组件一样组合、嵌套。同一业务组件可以在不同容器Dialog、Sheet、Split 等中复用。路由状态可以统一管理更容易实现复杂导航逻辑。更适配折叠屏、平板、多窗口等多端场景。换句话说Navigation 将“页面”从特殊对象变成了普通 UI 组件这是 HarmonyOS UI 架构演进的重要一步。1.7 为什么新项目建议直接使用 Navigation结合 HarmonyOS 5 的发展方向可以总结出以下几点原因官方持续投入新的模板工程和示例代码几乎全部采用 Navigation。更好的跨设备体验天然支持 Stack、Split 等多种导航模式。更强的组件化能力业务模块之间不再依赖固定页面路径。更灵活的路由管理NavPathStack让开发者能够精细控制路由栈。更符合未来架构动态路由、模块化等新能力均围绕 Navigation 演进。对于新项目而言直接采用 Navigation可以避免后续从 Router 迁移的成本。
