鸿蒙应用开发实战：深度解析Router路由与页面生命周期管理

鸿蒙路由架构示意图

一、路由管理的重要性

在鸿蒙应用开发中，路由管理是实现页面导航的核心机制。良好的路由设计能：

1. 提升用户体验（流畅的页面切换）
2. 优化内存管理（合理控制页面栈）
3. 简化模块间通信（参数传递机制）
4. 支持复杂场景处理（登录拦截、页面重定向）

二、Router基础使用详解

1. 环境配置

在main_pages.json添加路由依赖

//文件位置src/main/resources/base/profile/main_pages.json

{
  "src": [
    "pages/Index",
    "views/TwoPage",
    "pages/csPage",
    "pages/Date/LocalStoragePage"
  ]
}

2. 核心API使用

// 带参跳转（保留当前页）
router.pushUrl({
  url: 'pages/DetailPage',
  params: {
    id: 2023,
    title: 'HarmonyOS Next'
  },
  routerMode: router.RouterMode.Standard// 标准模式
})

// 替换当前页面（适用登录场景）
router.replaceUrl({
  url: 'pages/HomePage',
  params: { from: 'splash' }
})

// 返回上一页（带返回参数）
router.back({
  result: { 
    status: 'SUCCESS',
    {...} 
  }
})

3. 参数接收处理

@Component
struct DetailPage {
  @State id: number = 0
  @State title: string = ''

  aboutToAppear() {
    const params = router.getParams()
    if (params) {
      this.id = params['id'] as number
      this.title = params['title'] as string
    }
  }
}

4.页面栈相关 api

页面栈是用来存储程序运行时页面的一种数据结构，遵循先进后出的原则

页面栈的最大容量为32个页面

// 获取页面栈长度
router.getLength()

// 获取页面状态 
let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);

// 清空页面栈
router.clear()

三. 路由模式

路由提供了两种不同的跳转模式：

1. standard（标准实例模式）
2. Single（单实例模式）

不同模式的决定了页面是否会创建多个实例：

Standard：无论之前是否添加过，一直添加到页面栈【默认】

        场景：适用于每次跳转都呈现全新内容或状态的场景，避免数据展示紊乱（数据变化）

Single：如果之前加过页面，会使用之前添加的页面【需要添加参数手动修改】

        场景：适用于那些需要保留页面状态或避免重复创建相同页面的场景（数据不变化）

使用Strandard模式在页面反复跳转时会持续往页面栈中添加新的页面，浪费内存.

使用Single模式，在页面反复跳转时会将已有的页面移到栈顶，避免浪费内存

四. 页面和自定义组件的生命周期

什么是生命周期？

组件和页面在创建、显示、销毁的这一整个过程中，会自动执行 一系列的【生命周期钩子】，其实就是一系列的【函数】，让开发者有机会在特定的阶段运行自己的代码

示例代码：

// 只有被@Entry装饰的组件才可以调用页面的生命周期
  // 页面每次显示时触发一次
  onPageShow() {
    console.info('onPageShow');
  }

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  // 页面每次隐藏时触发一次
  onPageHide() {
    console.info('onPageHide');
  }

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  // 当用户点击返回按钮时触发
  onBackPress() {
    console.info('onBackPress');
    return false; // 返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
  }

  // 组件生命周期
  // build()函数之前执行
  aboutToAppear() {
    console.info('aboutToAppear');
  }

  // 组件生命周期
  // 组件的 UI 构建完成之后立即被调用
  onDidBuild() {
    console.info('onDidBuild');
  }

  // 组件生命周期
  // 销毁之前执行,没销毁不会执行
  aboutToDisappear() {
    console.info('aboutToDisappear');
  }

注意！

        

应用生命周期:UIAbility


onCreate：组件创建时触发
onNewWant：创建新窗口时触发
onWindowStateCreate：窗口状态创建时触发
onForeground：进入前台时触发
onBackground：进入后台时触发
onWindowStageDestroy：窗口阶段销毁时触发
onDestroy：组件销毁时触发

组件生命周期: 被@Entry 修饰


aboutToAppear：即将出现时
AboutToDisappear：即将消失时
onPageShow：页面显示时
onPageHide：页面隐藏时
onBackPress：按下返回键时

普通系统组件


onApper：当组件出现在屏幕上触发
onDisAppear:当然组件从屏幕上消失

组件生命周期: 未被@Entry 修饰


aboutToAppear：即将出现时
AboutToDisappear：即将消失时

Navigation 组件生命周期


onWillAppear：即将可见时
onAppear：可见时
onWillShow：即将展示时
onShown：已展示时
onWillHide：即将隐藏时
onHidden：已隐藏时
onWillDisappear：即将消失时
OnDisAppear：消失时
onBackPress：按下返回键时 

五.Router与Navigation深度对比

适用HarmonyOS NEXT / API12或以上版本 -----------------