鸿蒙 5.0+ Ability 与路由管理实战：页面跳转 + 生命周期全解析（认证 12% 考点版）

本文详细讲解HarmonyOS多页面应用开发核心知识，包括Ability组件配置、路由跳转和生命周期管理三大重点。首先介绍Ability的概念与module.json5配置方法，详解standard/singleTask/singleInstance三种启动模式的应用场景。其次演示路由跳转实战，包括pushUrl带参跳转、replaceUrl替换页面和back返回传值等核心API用法。最后完整解析

2401_89012602

873人浏览 · 2025-12-13 12:33:38

2401_89012602 · 2025-12-13 12:33:38 发布

各位同学们好呀！上一篇搞定了 ArkTS 语法和状态管理，这篇直接打通多页面应用的核心 ——Ability 组件与路由跳转！这可是 HarmonyOS 认证中「应用架构」模块的重中之重，占 12% 分值，不管是做项目还是备考试，都得实打实掌握～今天从 Ability 配置、路由跳转、生命周期到完整实战，全程手把手教学，代码直接抄就能跑，新手也能一次吃透！

一、Ability 核心概念（认证基础 3 分，必懂！）

1. Ability 是什么？

Ability 是鸿蒙应用的最小运行单元，相当于页面的 “容器”—— 咱们写的 ArkTS 组件，都要靠 Ability 才能加载运行。认证重点考Page Ability（带 UI 的页面容器），另外两种 Service Ability（后台服务）、Data Ability（数据共享）了解即可。

2. 关键配置：module.json5（替换旧版 config.json）

所有 Ability 的配置都在module.json5里，核心参数不能错，直接上可复制的配置模板（CSDN 适配版）：

{

  "app": {

    "bundleName": "com.example.harmonyrouter", // 自己的包名，唯一标识

    "versionCode": 10000,

    "versionName": "1.0.0"

  },

  "module": {

    "name": "entry",

    "type": "entry",

    "deviceTypes": ["phone", "tablet", "car"], // 支持多设备

    "abilities": [

      {

        "name": ".MainAbility", // 主Ability，必填

        "srcEntry": "./ets/app.ets", // 入口文件路径

        "type": "page", // 类型为Page Ability

        "launchType": "standard", // 启动模式（认证考点）

        "orientation": "unspecified", // 屏幕方向：默认自适应

        "icon": "$media:icon",

        "label": "$string:app_name",

        "skills": [ // 技能声明，用于隐式跳转（认证常考）

          {

            "entities": ["entity.system.home"],

            "actions": ["action.system.home"]

          }

        ]

      },

      {

        "name": ".DetailAbility", // 详情页Ability

        "srcEntry": "./ets/pages/DetailPage.ets",

        "type": "page",

        "launchType": "singleTask" // 单任务栈模式

      },

      {

        "name": ".SettingAbility", // 设置页Ability

        "srcEntry": "./ets/pages/SettingPage.ets",

        "type": "page",

        "launchType": "singleInstance" // 全局单实例模式

      }

    ]

  }

}

3. 启动模式详解（认证 2 分，记场景！）

三种启动模式是高频考点，别死记概念，记适用场景更高效：

启动模式	特点	适用场景
standard	多实例，每次跳转新建	普通列表页、详情页
singleTask	单任务栈，复用已有实例	首页、购物车页面
singleInstance	全局单实例，独立任务栈	地图页面、播放器页面

�� 避坑点：启动模式选错会导致页面跳转错乱！比如购物车用 standard 模式，会出现多个购物车页面，必须用 singleTask。

二、路由管理：页面跳转实战（认证 4 分，核心 API！）

鸿蒙 5.0 + 推荐用@ohos.router模块（替代旧版 abilityRouter），支持带参数跳转、返回传值，3 种核心用法直接上代码：

1. 普通跳转（带参数，保留返回栈）

最常用场景：列表页跳详情页，传递 ID、名称等参数：

// MainPage.ets（首页跳转详情页）

import router from '@ohos.router'; // 必须引入路由模块

@Entry

@Component

struct MainPage {

  build() {

    Column({ space: 20 }) {

      Text("首页")

        .fontSize(24)

        .fontWeight(FontWeight.Bold)

      

      Button("跳转到详情页（带参数）")

        .width('80%')

        .height(45)

        .backgroundColor($r("app.color.primary_color"))

        .fontColor('#fff')

        .onClick(() => {

          // 跳转并传递参数

          router.pushUrl({

            url: "pages/DetailPage", // 目标页面路径（必须和pages目录一致）

            params: {

              articleId: "harmony-202405",

              title: "ArkTS路由实战",

              author: "鸿蒙开发者"

            }

          })

          .then(() => {

            console.log("跳转成功")

          })

          .catch((err) => {

            console.error(`跳转失败：${err.message}`)

          })

        })

    }

    .width('100%')

    .height('100%')

    .backgroundColor($r("app.color.page_bg_color"))

    .justifyContent(FlexAlign.Center)

  }

}

2. 替换当前页面（不保留返回栈）

适用场景：登录成功后跳首页（不能返回登录页）：

// LoginPage.ets（登录页跳转首页）

Button("登录成功，进入首页")

  .onClick(() => {

    router.replaceUrl({

      url: "pages/MainPage", // 替换当前页面

      params: { loginState: true }

    })

  })

3. 返回上一页（带返回值）

适用场景：详情页操作后，返回首页传递结果（比如收藏状态）：

// DetailPage.ets（详情页返回首页）

Button("返回首页并传值")

  .onClick(() => {

    router.back({

      url: "pages/MainPage", // 目标页面（上一页）

      params: { isCollected: true, collectTime: new Date().toLocaleString() }

    })

  })

4. 目标页面接收参数

不管是哪种跳转，目标页面都用router.getParams()接收参数：

// DetailPage.ets（接收首页参数）

import router from '@ohos.router';

@Entry

@Component

struct DetailPage {

  // 接收参数（页面加载时获取）

  private pageParams = router.getParams();

  build() {

    Column({ space: 15 }) {

      Text("详情页")

        .fontSize(22)

        .fontWeight(FontWeight.Bold)

      

      // 展示接收的参数

      Text(`文章ID：${this.pageParams.articleId}`)

        .fontSize(16)

      Text(`标题：${this.pageParams.title}`)

        .fontSize(16)

      Text(`作者：${this.pageParams.author}`)

        .fontSize(16)

      

      Button("返回首页")

        .marginTop(30)

        .onClick(() => {

          router.back() // 单纯返回，不带参数

        })

    }

    .width('100%')

    .height('100%')

    .padding(20)

    .backgroundColor($r("app.color.page_bg_color"))

  }

}

�� 避坑点：

路径必须写对！url要和ets/pages/下的文件名一致（大小写敏感）；

传递参数支持 number、string、boolean，不支持复杂对象（比如自定义类）；

跳转失败先查日志：看是不是路径错了，或者目标页面没在 module.json5 中配置。

三、Ability 生命周期（认证 3 分，必背顺序！）

Page Ability 的生命周期是认证高频考点，核心是记住回调顺序和每个回调的作用，直接上实战代码 + 详解：

1. 生命周期回调顺序（必背！）

onCreate() → onWindowStageCreate() → onForeground() → 运行中 → onBackground() → onWindowStageDestroy() → onDestroy()

2. 实战：监听应用前后台切换

在app.ets中重写生命周期方法，打印日志看执行顺序：

// app.ets（Ability入口文件）

import router from '@ohos.router';

@Entry

@Component

struct App {

  build() {

    router.Router() // 路由容器，管理所有页面

  }

}

// 主Ability，重写生命周期方法

export default class MainAbility extends Ability {

  // 1. Ability创建时调用（初始化数据）

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {

    super.onCreate(want, launchParam);

    console.log("MainAbility： onCreate（创建了）");

    // 这里做初始化：比如初始化数据库、读取本地缓存

  }

  // 2. 窗口创建时调用（设置UI根节点）

  onWindowStageCreate(windowStage: WindowStage) {

    super.onWindowStageCreate(windowStage);

    console.log("MainAbility： onWindowStageCreate（窗口创建了）");

    // 加载入口页面

    windowStage.loadContent('pages/MainPage', (err, data) => {

      if (err.code) {

        console.error('加载页面失败：', err.message);

        return;

      }

    });

  }

  // 3. 切换到前台时调用（恢复状态）

  onForeground() {

    super.onForeground();

    console.log("MainAbility： onForeground（切到前台了）");

    // 比如：刷新页面数据、恢复视频播放、更新定位

  }

  // 4. 切换到后台时调用（保存状态）

  onBackground() {

    super.onBackground();

    console.log("MainAbility： onBackground（切到后台了）");

    // 比如：保存表单数据、暂停视频播放、保存定位状态

  }

  // 5. 窗口销毁时调用

  onWindowStageDestroy() {

    super.onWindowStageDestroy();

    console.log("MainAbility： onWindowStageDestroy（窗口销毁了）");

  }

  // 6. Ability销毁时调用（释放资源）

  onDestroy() {

    super.onDestroy();

    console.log("MainAbility： onDestroy（销毁了）");

    // 比如：关闭数据库连接、取消网络请求

  }

}

3. 认证考点总结

onCreate()：只能调用一次，初始化数据（不能写 UI 相关代码）；

onForeground()/onBackground()：成对出现，用于前后台状态切换；

want参数：在onCreate()中获取，用于接收隐式启动的参数（比如从其他应用跳转过来的参数）。

四、完整实战：多页面导航应用（直接复用！）

整合前面的知识点，做一个包含 “首页→详情页→设置页” 的完整应用，工程结构 + 代码全给：

1. 工程结构

entry/src/main/ets/
├─ pages/
│   ├─ MainPage.ets
│   ├─ DetailPage.ets
│   └─ SettingPage.ets
└─ app.ets

2. 核心页面代码（直接复制运行）

（1）设置页（SettingPage.ets）

// SettingPage.ets

import router from '@ohos.router';

@Entry

@Component

struct SettingPage {

  build() {

    Column({ space: 20 }) {

      Text("设置页")

        .fontSize(24)

        .fontWeight(FontWeight.Bold)

      

      Button("返回首页（替换当前页）")

        .width('80%')

        .height(45)

        .backgroundColor($r("app.color.primary_color"))

        .fontColor('#fff')

        .onClick(() => {

          router.replaceUrl({ url: "pages/MainPage" })

        })

    }

    .width('100%')

    .height('100%')

    .backgroundColor($r("app.color.page_bg_color"))

    .justifyContent(FlexAlign.Center)

  }

}

（2）首页新增跳转到设置页

在MainPage.ets中添加按钮：

// MainPage.ets 新增代码

Button("跳转到设置页（替换当前页）")

  .width('80%')

  .height(45)

  .backgroundColor($r("app.color.gray_color"))

  .fontColor('#fff')

  .onClick(() => {

    router.replaceUrl({ url: "pages/SettingPage" })

  })

3. 配套资源配置（延续前两篇，直接复用）

颜色配置（resources/element/color.json）：

{

  "color": [

    {

      "name": "primary_color",

      "value": "#FF007DFF" // 鸿蒙蓝

    },

    {

      "name": "bg_color",

      "value": "#F5F5F5" // 卡片背景色

    },

    {

      "name": "page_bg_color",

      "value": "#EEEEEE" // 页面背景色

    },

    {

      "name": "gray_color",

      "value": "#999999" // 辅助色

    }

  ]

}

文字配置（resources/element/string.json）：

{

  "string": [

    {

      "name": "app_name",

      "value": "多页面导航应用"

    },

    {

      "name": "main_title",

      "value": "鸿蒙路由实战"

    }

  ]

}

4. 运行测试流程

启动应用：触发MainAbility的onCreate()→onWindowStageCreate()→onForeground()；
首页点击 “跳转到详情页”：打开详情页，参数正常显示；
详情页点击 “返回首页”：回到首页，触发详情页的onBackground()；
首页点击 “跳转到设置页”：替换当前页，无法返回首页；
按手机返回键退出应用：触发onBackground()→onWindowStageDestroy()→onDestroy()。

五、认证考点总结 + 学习建议（冲证必看！）

1. 认证分值分布（直接记，备考不迷路）

Ability 配置：3 分（module.json5 中的 abilities 配置、skills 声明）；

路由跳转 API：4 分（pushUrl/replaceUrl/back 的用法、参数传递）；

生命周期：3 分（回调顺序、onForeground/onBackground 的作用）；

启动模式：2 分（三种模式的适用场景）。

2. 学习建议（少走弯路！）

亲手测生命周期：运行应用，切换前后台、跳转页面，在 Logcat 中看日志顺序，比死记硬背快 10 倍；
练透路由跳转：用 “首页→详情页→设置页” 的流程，反复测试带参数跳转、返回传值，熟悉 API；
踩坑练习：故意写错页面路径、传递复杂对象，看报错信息，掌握排查方法；
结合状态管理：把上一篇的 @Link/@Provide 用到跨页面数据传递中（比如首页和详情页共享收藏状态）。
目前班级正火热招募学员！加入班级：https://developer.huawei.com/consumer/cn/training/classDetail/6b5617ffd9264d6daa2f3d9250204f1e?type=1%3Fha_source%3Dhmosclass&ha_sourceId=89000248，跟着系列文章系统学，快速掌握鸿蒙开发核心技能，冲刺 HarmonyOS 应用开发者认证！无论你是零基础入门，还是在职开发者提升，都能在班级中收获成长，抢占鸿蒙生态人才红利～