鸿蒙 Navigation VS Router 对比

news2024/9/21 4:40:54

当前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进行标识。

image.png

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 上走投无路死磕方案。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1948340.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

看 Unity 组件的源码 —— ILSpy

ILSpy 是开源的 .NET 程序集浏览器和解编译器。 下载 ILSpy ILSpy Github 地址:icsharpcode/ILSpy: .NET Decompiler with support for PDB generation, ReadyToRun, Metadata (&more) - cross-platform! (github.com) 它有 Release 包可以下载 也提供 IDE 的…

Cadence23学习笔记(十四)

ARC就是圆弧走线的意思: 仅打开网络的话可以只针对net进行修改走线的属性: 然后现在鼠标左键点那个走线,那个走线就会变为弧形: 添加差分对: 之后,分别点击两条线即可分配差分对: 选完差分对之后…

解锁创新:AI如何推动低代码应用的智能化

在当今快速变化的商业环境中,企业面临着前所未有的挑战和机遇。数字化转型已成为各行各业的必然趋势,企业需要迅速适应市场变化,提升客户体验,并降低开发成本。 这一背景下,低代码开发平台的崛起为企业提供了一种高效…

ICIP-2020-A Non-local Mean Temporal Filter for VideoCompression

在 libvpx、VP8、VP9 和 HEVC 等各种编码器实现中,早就发现在预处理阶段过程中从源视频信号去除噪声对客观压缩效率的提升存在好处。通常使用常规的块匹配运动搜索来构建运动轨迹,并沿着轨迹比较每对像素,根据像素间的差异确定时域滤波器系数…

SpringSecurity如何整合JWT

整合JWT 我们前几个小节,实现的是非前后端分离情况下的认证与授权的处理,目前大部分项目,都是使用前后端分离的模式。那么前后端分离的情况下,我们如何使用SpringSecurity来解决权限问题呢?最常见的方案就是SpringSe…

如何学习Airflow:糙快猛的大数据之路(附思维导图)

什么是Airflow? 在开始之前,让我们先简单了解一下Airflow是什么。Apache Airflow是一个开源的工作流管理平台。它允许你以代码的方式定义、调度和监控复杂的数据处理管道。 想象一下,你有一系列需要按特定顺序执行的任务,而且这些任务之间还有依赖关系,Airflow就是为解决这…

【NPU 系列专栏 1.1 -- NPU TOPS 算力的计算方式】

请阅读【嵌入式及芯片开发学必备专栏】 文章目录 NPU 算力MAC 阵列简介MAC 阵列特点 MAC 阵列的结构MAC 阵列架构示例 MAC 阵列计算举例示例计算 TOPS 计算方法 NPU 算力 OpenCV 算法会消耗很大一部分自动驾驶芯片的算力,在车上堆摄像头的同时也需要堆TOPS&#xf…

把 网页代码 嵌入到 单片机程序中,2024/7/25 17:33

把 网页代码 嵌入到 单片机程序中 废话不多说直接上结果: 代码中定义: const char* html" 处理过的网页代码 " ; 处理网页代码的 web 程序( 主要是 正则 把双引号 加 符号) <!DOCTYPE html> <html lang"en" style"background-color: rgba…

Python 爬虫 tiktok API 获取TIKTOK标签信息 数据采集

此接口可通过标签id一键查询到tiktok标签信息&#xff0c;如有需要&#xff0c;请点击文末链接联系我们。 详细采集页面如图 https://www.tiktok.com/tag/musicand?_r1&namemusicand&u_codeeab7jd1ha5l36c&_deab7h4fj9h9k1f&share_challenge_id2878999&…

CXL与NVME融合场景下, 计算存储应用案例分析

场景1:数据写入之前 目标是避免数据从存储设备传输到主机内存再返回存储设备的传统过程中的数据搬运成本。通过利用CXL和NVMe技术的结合&#xff0c;可以在存储层直接对数据进行处理&#xff0c;即所谓的计算存储&#xff08;Computational Storage&#xff09;。这特别适用于…

革新优选购物模式:重塑电商体验

在当今竞争激烈的电商市场中&#xff0c;革新优选购物模式以其独特的运营策略脱颖而出&#xff0c;其核心在于通过价格优化、激励机制创新以及社交网络的深度融合&#xff0c;激发消费者的购物热情&#xff0c;实现销售与用户忠诚度的双重飞跃。 一、合规运营&#xff0c;构建信…

Vue3 study

Vue3 工程 创建 还是能像 vue2 一样通过 vue-cli 创建&#xff0c;即 vue create projectName 但是官方更推荐 vite 创建&#xff0c;即 npm create vuelatest&#xff0c;然后从项目名开始配置 总结&#xff1a;入口在 index.html&#xff0c;它会引入 main.ts&#xff0c;…

Inxedu 因酷网校在线教育系统之sql注入代码审计

1 后台-/article/delete?articelId= 注入 全局搜索 ${,开启文件过滤,关注*Mapper.xml文件 点击进入ArticleMapper.xml,SQL注入点在第97行,使用$直接拼接了参数 查找哪里声明那个方法 点击deleteArticleByIds,查看谁调用了它。在ArticleDaoImpl调用 接着点击deleteArticl…

静态IP地址在网络安全中的角色解析与实测分析

在这个网络边界日益模糊的时代&#xff0c;每一次点击、每一次数据传输都有着安全问题。作为网络安全体系中的基石&#xff0c;静态IP地址的角色显得尤为重要而复杂。今天&#xff0c;我们的测评团队将带您深入剖析静态IP地址在网络安全中的多重角色&#xff0c;并通过两家代理…

谁是中国井村屋?背靠红豆产业链,年销2.5亿根小豆冰棍,井村屋极致产品力是如何策划的?

红豆棒冰是日本老字号“井村屋”旗下的招牌产品。 井村屋在日本以红豆产业链见长&#xff0c;凭借优质产业链打造的红豆棒冰很逆天&#xff0c;每年大约售出 2.5 亿根&#xff0c;日本1.2亿人口&#xff0c;相当于每人每年至少吃两根。 这个国民级单品是如何打造极致产品力的呢…

【爆】Stable Diffusion【真人模型】:全网最真实的亚洲女性大模型

模型v1下载&#xff1a;XXMix_9realisticSDXL-Checkpoint-展夜枭-LiblibAI 环境要求&#xff1a; gpu&#xff1a;12G 最好16G python&#xff1a;3.10 cuda&#xff1a;11.8 一、介绍 XXMix_9realisticSDXL是一个基于Stable Diffusion XL模型训练的微调模型&#xff0c;…

06 capture软件元器件库的管理与调用 07 元器件库与PCB封装库的关联与调用

06 capture软件元器件库的管理与调用 && 07 元器件库与PCB封装库的关联与调用 第一部分 06 capture软件元器件库的管理与调用一、获取元器件库的方法 第二部分 07 元器件库与PCB封装库的关联与调用 第一部分 06 capture软件元器件库的管理与调用 一、获取元器件库的方…

vue3 + antd vue 纯前端 基于xlsx 实现导入excel 转 json,将json数据转换XLSX导出(模版下载)

一、导入 0、关键代码 // 安装插件 npm i xlsx/yarn add xlsx // 导入xlsx import * as XLSX from xlsx; 点击提交的时候才整理数据。上传的时候文件保存在 state.form.file[0] 中的 // 定义字段映射关系 const fieldMap {sheet2json: {技能名称: skill_name,技能等级: …

ROS配置并同时驱动多个UVC相机(含功能包)

配置并同时驱动多个UVC相机&#xff0c;并将数据保存为ROS话题形式的bag文件。 ROS可以同时驱动多个UVC相机。要实现这个目标并将数据保存成ROS话题的形式&#xff0c;再保存为bag文件&#xff0c;可以按照以下步骤操作&#xff1a; 1. 安装必要的包 sudo apt-get update sud…

vue3前端开发-小兔鲜项目-一些额外提醒的内容

vue3前端开发-小兔鲜项目-一些额外提醒的内容&#xff01;今天这一篇文章&#xff0c;是提醒大家&#xff0c;如果你正在学习小兔鲜这个前端项目&#xff0c;有些地方需要提醒大家&#xff0c;额外注意的地方。 第一个&#xff1a;就是大家在进入二级页面后&#xff0c;有一个分…