鸿蒙 ArkTS 页面跳转入门：从代码到效果的完整实现

在鸿蒙应用开发中，页面跳转是实现多页面交互的核心能力。本文将带你从零实现一个包含 “首页→第二页→返回首页” 的完整跳转流程，同时附上关键代码和对应截图位置说明，帮你彻底搞懂 ArkTS 路由跳转的核心用法。通过本次鸿蒙基础页面跳转案例，我们完成了首页文本展示、按钮样式定制、路由页面跳转以及跳转结果日志打印等完整实操功能。代码采用 ArkTS 声明式 UI 写法，布局结构清晰，同时加入了跳转成功与

2401_88832378

391人浏览 · 2026-05-15 18:17:36

2401_88832378 · 2026-05-15 18:17:36 发布

二、首页（Index.ets）实现：跳转到第二页

2.3 首页运行效果

三、第二页（Second.ets）实现：返回首页

前言

在鸿蒙应用开发中，页面跳转是实现多页面交互的核心能力。本文将带你从零实现一个包含 “首页→第二页→返回首页” 的完整跳转流程，同时附上关键代码和对应截图位置说明，帮你彻底搞懂 ArkTS 路由跳转的核心用法。

一、项目结构与基础准备

1.1 项目文件结构

首先，我们需要确保项目中有两个页面文件，并且配置文件正确注册了页面路径。完整的文件结构如下：

关键文件说明：

Index.ets：首页，包含 “下一页” 按钮
Second.ets：第二页，包含 “返回” 按钮
main_pages.json：页面路由配置文件，注册所有页面路径

1.2 页面路由配置

打开 main_pages.json，确保两个页面路径都已注册，这是跳转生效的前提。

配置代码如下：

⚠️ 注意：路径必须和文件位置一致，且不能带.ets后缀。

二、首页（Index.ets）实现：跳转到第二页

2.1 首页的核心功能是点击 “下一页” 按钮，跳转到pages/Second页面。

import { UIContext } from '@kit.ArkUI';

@Entry
@Component
struct Index {
@State message: string = '你好，世界！';

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)

Button(){
Text('下一页')
.fontSize(40)
.fontWeight(FontWeight.Bolder)
}
.type(ButtonType.Capsule)
.margin({
top:20
})
.backgroundColor('#258525')
.width('50%')
.height('10%')
.onClick(()=>{
console.info('Successful')
let uiContext : UIContext = this.getUIContext();
let router = uiContext.getRouter();

router.pushUrl({url: 'pages/Second'}).then(()=>{
console.info('successful')
})
.catch((err:BusinessError) => {
console.error('fail')
})
})
}
.width('100%')
}
.height('100%')
}
}

2.2 代码关键部分截图

2.3 首页运行效果

运行项目后，首页会显示 “你好，世界！” 文本和绿色的 “下一页” 按钮，效果如下：

三、第二页（Second.ets）实现：返回首页

第二页的核心功能是点击 “返回” 按钮，回到上一页（即首页）。

3.1 完整代码

@Entry
@Component
struct Second {
  @State message: string = '第二个页面';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button(){
          Text('返回')
            .fontSize(40)
            .fontWeight(FontWeight.Bolder)
        }
        .type(ButtonType.Capsule)
        .margin({
          top:20
        })
        .backgroundColor('#258525')
        .width('50%')
        .height('10%')
        .onClick(()=>{
          console.info('返回上一页')
          let uiContext : UIContext = this.getUIContext();
          let router = uiContext.getRouter();
          router.back();
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}