鸿蒙 组件导航vs页面路由：Navigation与Router

鸿蒙开发中页面跳转是基础功能。鸿蒙提供了两种页面跳转方式组件导航Navigation和页面路由ohos.router。本文将详细介绍两种方案的架构差异能力对比跳转、传参、返回、动画等Navigation的优势一次开发多端部署、更丰富的动效、更灵活的页面栈操作一、什么是页面框架页面定义Navigation页面通过NavDestination组件承载特指一个NavDestination组件包含的内容Router页面特指Entry装饰的自定义组件Navigation vs Router对比项NavigationRouter页面位置放在Navigation组件内部进行跳转独立页面管理一次开发多端部署支持Auto模式自适应单栏和双栏不支持页面栈操作更加灵活-动效和生命周期更丰富有限推荐度推荐使用-备注官方推荐使用组件导航Navigation来实现页面跳转以及组件内的跳转以获得更佳的使用体验。二、架构差异2.1 架构对比框架架构特点Router页面在页面栈管理节点Stage下面Navigation作为导航容器组件可挂载在单个page节点下也可叠加、嵌套管理标题栏、内容区和工具栏2.2 Navigation的优势优势说明接口清晰显式区分标题栏、内容区和工具栏实现更灵活的管理和UX动效路由容器灵活由开发者决定路由容器的位置支持在全模态、半模态、弹窗中显示多端适配整合一次开发多端部署能力默认提供统一的标题显示、页面切换和单双栏适配页面配置灵活基于UIBuilder能力由开发者决定页面别名和页面UI对应关系切换动效丰富基于组件属性动效和共享元素动效能力页面栈开放开放了页面栈对象开发者可继承更好地管理页面显示三、能力对比3.1 跳转相关业务场景NavigationRouter跳转指定页面pushPathpushDestinationpushUrlpushNameRoute跳转HSP中页面支持支持跳转HAR中页面支持支持跳转传参支持支持传参类型对象形式对象形式暂不支持方法变量跳转结果回调支持支持跳转单例页面支持支持路由替换replacePathreplacePathByNamereplaceUrlreplaceNameRoute3.2 页面返回相关业务场景NavigationRouter页面返回支持支持页面返回传参支持支持返回指定路由支持支持页面返回弹窗通过路由拦截实现showAlertBeforeBackPage3.3 路由栈管理业务场景NavigationRouter路由栈清理clear()clear()清理指定路由removeByIndexesremoveByName不支持获取页面栈对象支持不支持路由拦截setInterception不支持路由栈信息查询支持getState()getLength()路由栈move操作moveToTopmoveIndexToTop不支持3.4 动画相关业务场景NavigationRouter转场动画支持支持自定义转场动画支持支持动画类型受限屏蔽转场动画支持全局和单次设置pageTransition的duration为0geometryTransition共享元素动画支持NavDestination之间共享不支持3.5 生命周期和监听业务场景NavigationRouter页面生命周期监听UIObserver.on(navDestinationUpdate)UIObserver.on(routerPageUpdate)3.6 其他能力业务场景NavigationRouter一次开发多端部署能力支持Auto模式自适应单栏和双栏不支持获取指定页面参数支持不支持沉浸式页面支持不支持需通过window配置设置页面标题栏和工具栏支持不支持模态嵌套路由支持不支持四、Navigation特有能力4.1 一次开发多端部署Navigation支持Auto模式可自适应单栏和双栏显示适配手机、平板、折叠屏等多种设备。4.2 路由拦截通过setInterception()实现路由拦截可在页面跳转前进行权限校验、弹窗确认等操作。4.3 清理指定路由Navigation支持removeByIndexes和removeByName清理指定路由Router不支持。4.4 共享元素动画Navigation支持geometryTransition共享元素动画可在NavDestination之间实现页面切换的平滑过渡。4.5 模态嵌套路由Navigation支持在模态框、弹窗、半模态中嵌入路由容器Router不支持。五、核心差异能力NavigationRouter胜出一次开发多端部署✅❌Navigation路由拦截✅❌Navigation清理指定路由✅❌Navigation共享元素动画✅❌Navigation沉浸式页面✅❌Navigation标题栏/工具栏✅❌Navigation模态嵌套路由✅❌Navigation转场动画✅✅持平选择建议场景推荐方案新开发的应用Navigation需要多端适配Navigation需要灵活的路由栈管理Navigation需要自定义转场动画Navigation简单页面跳转两者皆可但推荐Navigation鸿蒙推荐使用组件导航Navigation实现页面跳转相比页面路由RouterNavigation具备一次开发多端部署能力、更灵活的路由栈操作清理指定路由、move操作、更丰富的动效共享元素动画、路由拦截、沉浸式页面、标题栏/工具栏设置等优势。