鸿蒙 Navigation VS Router 对比

当前HarmonyOS支持两套路由机制（Navigation和Router），Navigation作为后续长期演进及推荐的路由选择方案，其与Router比较的优势如下：

易用性层面：

Navigation天然具备标题、内容、回退按钮的功能联动，开发者可以直接使用此能力。Router若要实现此能力，需要自行定义；
Navigation的页面是由组件构成，易于实现共享元素的转场。

功能层面：

Navigation天然支持一多，Router不支持；
Navigation没有路由数量限制，Router限制32个；
Navigation可以获取到路由栈NavPathStack，并对路由栈进行操作；
Navigation可以嵌套在模态对话框中，也就是说可以模态框中定义路由，Router不支持；
Navigation的组件全量由开发者自行控制，开发者可以自定义复杂的动效和属性的设置（背景、模糊等），Router的page对象不对外暴露，开发者无法对page进行处理。

性能层面

Navigation传递参数性能更优，Navigation通过引用传递，Router通过深拷贝完成；
Navigation可以配合动态加载，实现组件动态加载，Router页面使用@Entry进行修饰，当前模块加载时会生成全量页面。

Navigation & Router 结构对比

Navigation中的每个页面，承载在一个page里，通过NavDestination容器实现基于组件的页面跳转。
Router的每一个页面配置在一个单独的page中，通过@Entry进行标识。

Navigation & Router 能力对比

|------------------- | 业务场景 | 跳转指定页面 | 跳转HSP中页面 | 跳转HAR中页面 | 跳转传参 | 获取指定页面参数 | 跳转结果回调 | 跳转单例页面 | 页面返回 | 页面返回传参 | 返回指定路由 | 页面返回弹窗 | 路由替换 | 路由栈清理 | 清理指定路由 | 转场动画 | 自定义转场动画 | 屏蔽转场动画 | 共享元素动画 | 页面生命周期监听 | 获取页面栈对象 | 路由拦截 | 路由栈信息查询 | 路由栈操作 | 沉浸式页面 | 设置页面属性 | 设置页面标题 | 模态嵌套路由 ----------|---------------------------------------------------------------------------------------------|-----------------------------------|
| Navigation能力 | Router能力 |
| pushPath & pushDestination | pushUrl & pushNameRouter |
| 支持，需要先import页面 | 支持 |
| 支持，需要先import页面 | 支持 |
| 支持 | 支持 |
| 支持 | 不支持 |
| 支持 | 支持 |
| 可通过判断栈内有没有此页面，调用moveToTop实现 | 支持 |
| pop | back |
| 支持 | 支持 |
| popToName&popToIndex | 不支持 |
| 通过路由拦截实现 | showAlertBeforeBackPage |
| replacePath & replacePathByName | replaceUrl & replaceNameRouter |
| clear | clear |
| removeByIndexes & removeByName | 不支持 |
| 支持 | 支持 |
| 支持 | 支持 |
| pushDestination(info: NavPathInfo, animated?: boolean) & patshStack.disableAnimation（true） | 支持 duration属性设置为0 |
| 支持 | 不支持 |
| UIObserver.on('navDestinationUpdate') | UIObserver.on('routerPageUpdate') |
| 支持 | 不支持 |
| setInterception | 不支持 |
| getAllPathName & getParamByIndex & getParamByName&size | getState() & getLength() |
| moveToTop & moveIndexToTop | 不支持 |
| 支持 | 不支持，需通过window配置 |
（背景，模糊等） | 支持，backgroundBlurStyle | 不支持 |
栏（title）和工具栏（toolbar） | 支持 | 不支持 |
| 支持 | 不支持 |

//======

Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。

//======

鸿蒙关于页面跳转提供了两套解决方案，一套是页面路由 router，一套是组件导航 Navigation。前期我们在基建开发期间，采用的页面路由 router 方案，@zz/router 组件代码已经开发完毕了，但是到了开发 WebView 的 Hybrid 接口时，才意识到一个严重的问题，就是 router 提供的能力，并不能满足我们复杂的页面栈管理，譬如在页面栈中多个 WebView，我们需要关闭指定的 WebView 页面，router 提供的 API 能力是无法做到的。和华为沟通后才知道，官方是推荐 Navigation 来实现，且未来 router 方案不再演进。我们提出的复杂页面栈管理的能力，彼时 Navigation 支持的还不完整，但是伙伴告诉我们，他们会在 Navigation 上满足我们的需求。关闭页面栈中指定 index 或者 name 的页面，相信其他开发者也都会遇到，应该是一个普遍的需求。

基于这种情况，我们不得不迅速调整我们的路由组件，基于 Navigation 重新设计了一套路由方案，还好项目业务还没有开始大量开发，要改动的地方也不是很多，如果沟通再晚点，恐怕调整起来代价会相对更高点。此时的沟通，让我们少走了弯路，避免在 router 上走投无路死磕方案。