从 Router 到 Navigation:HarmonyOS 路由框架的全面升级与迁移指南

在本教程中,我们深入探讨了 Router 和 Navigation 在 HarmonyOS 中的用法差异及如何从 Router 切换到 Navigation 的方法。重点涵盖了页面跳转、转场动画、生命周期管理以及跨包路由的实现。

页面结构对比

Router 页面结构

每个页面需要使用 @Entry 注解。

页面需要在 main_page.json 中进行注册。

示例代码:

复制代码
// main_page.json
{
  "src": [
    "pages/Index",
    "pages/pageOne",
    "pages/pageTwo"
  ]
}

Router 页面示例:

复制代码
@Entry
@Component
struct Index {
  build() {
    Button('Navigate to PageOne')
      .onClick(() => {
        router.pushUrl({ url: 'pages/pageOne' });
      });
  }
}

Navigation 页面结构

基于组件化的设计。

需要一个 NavPathStack 对象来管理页面栈。

子页面通过 NavDestination 进行注册。

示例代码:

复制代码
@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack) {
      Button('Push PageOne')
        .onClick(() => this.pathStack.pushPathByName('pageOne'));
    }
    .title("Navigation");
  }
}

路由操作对比

生命周期管理

Router 生命周期

Router 页面依赖全局生命周期方法,主要包括:

aboutToAppear()

onPageShow()

aboutToDisappear()

onPageHide()

Navigation 生命周期

Navigation 生命周期基于 NavDestination 组件,提供了更多粒度的生命周期方法,如:

onWillAppear()

onAppear()

onWillDisappear()

onDisAppear()

动画支持

Router 转场动画

Router 提供系统预设和自定义动画,支持 sharedTransition 实现共享元素转场。

Navigation 转场动画

Navigation 内置转场动画机制,可通过 customNavContentTransition 自定义切换效果。同时支持通过 geometryTransition 属性实现共享元素转场。

跨包路由

Router 跨包路由

通过 @Entry 注解的 routeName 属性实现命名路由,并在主页面引入目标页面的路径。

示例代码:

复制代码
import('library/src/main/ets/pages/Index');

router.pushNamedRoute({ name: 'myPage', params: { key: 'value' } });

Navigation 跨包路由

Navigation 内置支持跨包跳转,目标页面在子包中声明为 export 后,直接在 Navigation 中注册。

总结

Router 更适合简单的页面跳转需求,而 Navigation 提供了更丰富的栈操作、动画自定义和组件化管理能力。如果项目需要跨包跳转或复杂的页面管理,建议迁移至 Navigation 体系。

相关推荐
Georgewu1 小时前
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
harmonyos
颜颜yan_4 小时前
【HarmonyOS5】UIAbility组件生命周期详解:从创建到销毁的全景解析
架构·harmonyos·鸿蒙·鸿蒙系统
龙儿筝7 小时前
ArkUI-X与Android桥接通信之消息通信
harmonyos
陈奕昆8 小时前
5.1 HarmonyOS NEXT系统级性能调优:内核调度、I/O优化与多线程管理实战
华为·harmonyos
androidstarjack8 小时前
如何评价华为最新长焦专利技术?能否颠覆手机长焦摄影的目前限制?
华为·智能手机
libo_20259 小时前
HarmonyOS5 全球化运营:使用AGC的本地化工具适配30+国家/地区
harmonyos
程序员小刘10 小时前
如何优化React Native应用以适配HarmonyOS5?
javascript·react native·react.js·华为·harmonyos
anyup10 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
程序员小刘10 小时前
【HarmonyOS 5】拍摄美化开发实践介绍以及详细案例
华为·harmonyos
晓北斗NorSnow10 小时前
华为手机开机卡在Huawei界面不动怎么办?
华为·智能手机