鸿蒙 Navigation VS Router 对比

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

  • 易用性层面:
  1. Navigation天然具备标题、内容、回退按钮的功能联动,开发者可以直接使用此能力。Router若要实现此能力,需要自行定义;
  2. Navigation的页面是由组件构成,易于实现共享元素的转场。
  • 功能层面:
  1. Navigation天然支持一多,Router不支持;
  2. Navigation没有路由数量限制,Router限制32个;
  3. Navigation可以获取到路由栈NavPathStack,并对路由栈进行操作;
  4. Navigation可以嵌套在模态对话框中,也就是说可以模态框中定义路由,Router不支持;
  5. Navigation的组件全量由开发者自行控制,开发者可以自定义复杂的动效和属性的设置(背景、模糊等),Router的page对象不对外暴露,开发者无法对page进行处理。
  • 性能层面
  1. Navigation传递参数性能更优,Navigation通过引用传递,Router通过深拷贝完成;
  2. Navigation可以配合动态加载,实现组件动态加载,Router页面使用@Entry进行修饰,当前模块加载时会生成全量页面。

Navigation & Router 结构对比

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

Navigation & Router 能力对比

|-----------------------------|---------------------------------------------------------------------------------------------|-----------------------------------|
| 业务场景 | Navigation能力 | Router能力 |
| 跳转指定页面 | pushPath & pushDestination | pushUrl & pushNameRouter |
| 跳转HSP中页面 | 支持,需要先import页面 | 支持 |
| 跳转HAR中页面 | 支持,需要先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 上走投无路死磕方案。

相关推荐
youtootech4 小时前
HarmonyOS 实战教程(八):个人中心与华为云服务集成 —— 以「柚兔自测量表」为例
华为·华为云·harmonyos
红烧大青虫5 小时前
HarmonyOS应用《玄象》开发实战:掷钱动画:animateTo + 缓动曲线的物理感模拟
harmonyos·鸿蒙
二流小码农6 小时前
鸿蒙开发:实现文本渐变效果
android·ios·harmonyos
程序员黑豆7 小时前
鸿蒙应用开发:Refresh + List 下拉刷新组件使用教程
前端·华为·harmonyos
fengxinzi_zack8 小时前
HarmonyOS应用《玄象》开发实战:MansionListPage 列表页:List / ListItem / LazyForEach 性能优化
harmonyos·鸿蒙
youtootech8 小时前
HarmonyOS 实战教程(九):响应式布局与断点系统 —— 以「柚兔自测量表」为例
华为·harmonyos
山璞8 小时前
将一个 Flutter 项目转为用 ArkUI-X 框架实现(4)
flutter·harmonyos
2501_919749039 小时前
华为鸿蒙隐私文件加密APP—小羊加密室
华为·harmonyos
程序员黑豆9 小时前
鸿蒙开发实战:使用 List 组件构建新闻列表
前端·华为·harmonyos
爱写代码的阿森10 小时前
鸿蒙三方库 | harmony-utils之RegexUtil正则匹配验证详解
服务器·华为·harmonyos·鸿蒙·huawei