鸿蒙开发中，页面跳转是基础功能。鸿蒙提供了两种页面跳转方式：组件导航（Navigation）和页面路由（@ohos.router）。

本文将详细介绍：

• 两种方案的架构差异

• 能力对比：跳转、传参、返回、动画等

• Navigation的优势：一次开发多端部署、更丰富的动效、更灵活的页面栈操作

一、什么是页面？

框架	页面定义
Navigation	页面通过NavDestination组件承载，特指一个NavDestination组件包含的内容
Router	页面特指@Entry装饰的自定义组件

Navigation vs Router

对比项	Navigation	Router
页面位置	放在Navigation组件内部进行跳转	独立页面管理
一次开发多端部署	支持，Auto模式自适应单栏和双栏	不支持
页面栈操作	更加灵活	-
动效和生命周期	更丰富	有限
推荐度	推荐使用	-

备注：官方推荐使用组件导航（Navigation）来实现页面跳转以及组件内的跳转，以获得更佳的使用体验。

二、架构差异

2.1 架构对比

框架	架构特点
Router	页面在页面栈管理节点Stage下面
Navigation	作为导航容器组件，可挂载在单个page节点下，也可叠加、嵌套，管理标题栏、内容区和工具栏

2.2 Navigation的优势

优势	说明
接口清晰	显式区分标题栏、内容区和工具栏，实现更灵活的管理和UX动效
路由容器灵活	由开发者决定路由容器的位置，支持在全模态、半模态、弹窗中显示
多端适配	整合一次开发多端部署能力，默认提供统一的标题显示、页面切换和单双栏适配
页面配置灵活	基于UIBuilder能力，由开发者决定页面别名和页面UI对应关系
切换动效丰富	基于组件属性动效和共享元素动效能力
页面栈开放	开放了页面栈对象，开发者可继承，更好地管理页面显示

三、能力对比

3.1 跳转相关

业务场景	Navigation	Router
跳转指定页面	pushPath & pushDestination	pushUrl & pushNameRoute
跳转HSP中页面	支持	支持
跳转HAR中页面	支持	支持
跳转传参	支持	支持
传参类型	对象形式	对象形式（暂不支持方法变量）
跳转结果回调	支持	支持
跳转单例页面	支持	支持
路由替换	replacePath & replacePathByName	replaceUrl & replaceNameRoute

3.2 页面返回相关

业务场景	Navigation	Router
页面返回	支持	支持
页面返回传参	支持	支持
返回指定路由	支持	支持
页面返回弹窗	通过路由拦截实现	showAlertBeforeBackPage

3.3 路由栈管理

业务场景	Navigation	Router
路由栈清理	clear()	clear()
清理指定路由	removeByIndexes & removeByName	不支持
获取页面栈对象	支持	不支持
路由拦截	setInterception	不支持
路由栈信息查询	支持	getState() & getLength()
路由栈move操作	moveToTop & moveIndexToTop	不支持

3.4 动画相关

业务场景	Navigation	Router
转场动画	支持	支持
自定义转场动画	支持	支持，动画类型受限
屏蔽转场动画	支持全局和单次	设置pageTransition的duration为0
geometryTransition共享元素动画	支持（NavDestination之间共享）	不支持

3.5 生命周期和监听

业务场景	Navigation	Router
页面生命周期监听	UIObserver.on('navDestinationUpdate')	UIObserver.on('routerPageUpdate')

3.6 其他能力

业务场景	Navigation	Router
一次开发多端部署能力	支持，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不支持。

五、核心差异

能力	Navigation	Router	胜出
一次开发多端部署	✅	❌	Navigation
路由拦截	✅	❌	Navigation
清理指定路由	✅	❌	Navigation
共享元素动画	✅	❌	Navigation
沉浸式页面	✅	❌	Navigation
标题栏/工具栏	✅	❌	Navigation
模态嵌套路由	✅	❌	Navigation
转场动画	✅	✅	持平

选择建议

场景	推荐方案
新开发的应用	Navigation
需要多端适配	Navigation
需要灵活的路由栈管理	Navigation
需要自定义转场动画	Navigation
简单页面跳转	两者皆可，但推荐Navigation

   鸿蒙推荐使用组件导航（Navigation）实现页面跳转，相比页面路由（Router），Navigation具备一次开发多端部署能力、更灵活的路由栈操作（清理指定路由、move操作）、更丰富的动效（共享元素动画）、路由拦截、沉浸式页面、标题栏/工具栏设置等优势。