大家好，我是杨利杰 YJlio。

上一节已经能识别点击的是哪一行。这一节我先把跳转缩小成两个页面：首页 Index 与详情页 Detail，确认“查看详情”和“返回”的基础关系，再在下一篇练习参数传递。

本篇编号 021，计划日期为 2026 年 10 月 11 日。原稿已保留；以下页面与配置是补充的学习示例，尚未执行本机编译或设备运行。配图均为概念图。

一、先确定两个页面的练习范围

本例首页显示“首页”和“查看详情”按钮，目标页面显示“详情页”和“返回”按钮。它没有工单 ID、查询请求或业务详情数据。

我先确认两个独立页面能切换，不把路由、参数解析和数据加载同时加入。页面显示正确之后，再逐步增加其他行为。

二、页面文件与注册名称要对应

本例约定在工程的 pages 目录中创建 Index.ets 和 Detail.ets。文件名大小写与路由名称保持一致。

页面文件	页面名称	路由注册与目标名称
Index.ets	首页	pages/Index
Detail.ets	详情页	pages/Detail

在采用 main_pages.json 配置页面的工程中，最小示意为：

{
  "src": [
    "pages/Index",
    "pages/Detail"
  ]
}

这里的名称不带 .ets 扩展名。实际文件通常位于模块资源配置中，应先核对当前模块的页面配置引用，不能把这份最小示意直接覆盖已有页面清单。

目标页面文件、注册名称和跳转 URL，三处必须对应。

三、在首页按钮事件中调用 pushUrl

下方示例采用与当前 UI 上下文绑定的 Router 调用方式。将代码放在首页 Index.ets 中，按钮点击时才调用 openDetail。

import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State message: string = '';

  private openDetail(): void {
    this.message = '';
    this.getUIContext().getRouter().pushUrl({
      url: 'pages/Detail'
    }, (err: BusinessError) => {
      if (err) {
        this.message = '跳转失败';
        console.error(`pushUrl failed: ${err.code}, ${err.message}`);
      }
    });
  }

  build() {
    Column({ space: 12 }) {
      Text('首页')
      Text(this.message)
      Button('查看详情').onClick(() => {
        this.openDetail()
      })
    }
    .width('100%')
    .padding(16)
  }
}

调用方式来自官方 Router 示例；能否用于自己的工程仍需核对 SDK 接口和模板。这里没有写“跳转成功”提示，避免把发起调用直接当作目标页面已经显示的证据。

四、详情页独立定义，再观察是否真的进入

在 Detail.ets 中定义详情页：

@Entry
@Component
struct Detail {
  build() {
    Column({ space: 12 }) {
      Text('详情页')
      Button('返回').onClick(() => {
        this.getUIContext().getRouter().back()
      })
    }
    .width('100%')
    .padding(16)
  }
}

Index 和 Detail 位于两个页面文件，各有自己的页面入口。不能把两份入口代码放进同一个页面文件，也不能仅在首页插入一个 Detail 子组件，就认定已经完成页面路由。

按示例逻辑，点击首页按钮后应看到“详情页”和“返回”。这是待验证的预期，实际结果要由自己的工程运行记录确认。

五、区分 pushUrl 与 replaceUrl 的页面栈行为

本例使用 pushUrl：详情页进入页面栈时，首页仍在它下面，因此可以通过 back 返回上一个页面。

replaceUrl 用于替换当前页面，和本例的返回关系不同。不能随意把 pushUrl 换成 replaceUrl，再期待保留同样的页面栈。

本例只讨论从首页进入详情页再返回的关系。直接启动详情页、连续进入多次或增加其他页面后，返回目标要结合当时页面栈判断。

back 返回的是页面栈中的上一页，不是按按钮名称猜出的“首页”。

六、失败时同时观察提示与诊断信息

首页的 message 用于显示“跳转失败”，回调同时输出错误 code 与 message。提示帮助用户知道操作没有完成，诊断信息则用于检查路径、页面注册和接口调用。

本例不预设具体错误码。实际诊断应保留原文与操作步骤，不能只记录一句“打不开”。

如果点击没有任何反应，我会先确认事件是否执行，再确认调用入口、目标名称与配置。如果构建阶段已报接口不存在，则先解决 SDK 与写法适配，不能等到运行阶段再查页面路径。

七、明确 Router 的学习边界

官方页面路由资料目前将 Router 标为不推荐，并建议应用采用 Navigation 组件作为路由框架。本文用 Router 讲清基础页面与页面栈，不把它写成新项目的默认最佳选择。

Navigation 与 Router 有不同的结构和使用方式，不能把一个体系的路由配置直接当成另一个体系的实现。本节先保持两页 Router 示例，后续若迁移，应按官方指导重新检查页面组织与返回行为。

示例使用 V1 的 @Component 与 @State。工程采用其他模板时应另行适配，系列名称不代表已经通过某个 SDK 版本验证。

八、把进入与返回写成可复现记录

操作	按示例逻辑预期	当前状态
初次启动	显示首页与查看详情按钮	待实际验证
点击查看详情	显示详情页与返回按钮	待实际验证
点击返回	返回先前的首页	待实际验证
再次进入与返回	检查目标与返回关系是否一致	待实际验证
实际遇到失败	保存提示、code/message、完整步骤	待实际记录

环境栏需记录真实 DevEco Studio、SDK/API、运行设备和窗口。配置修改前保留原内容，运行记录要包含页面文件、注册名称及实际显示。

调用已发起、目标页已显示和返回正确，是三个需要分别核对的结果。

写在最后

这节我把页面文件、注册名称和路由调用连起来，并补上进入与返回的最小示例。先确认目的地，再确认返回关系，才能继续讨论参数和详情内容。

下一篇学习页面参数传递与详情展示，继续沿着这两个页面增加数据，而不是重新混入一套不对应的导航写法。

参考资料

1. OpenHarmony 官方文档：页面路由，用于核对 Router 调用、页面栈与 Navigation 推荐说明。实际 HarmonyOS 工程请查对应 SDK 资料。
2. OpenHarmony 官方接口文档：Router，用于查看接口形式与限制。
3. 本系列第 021 篇原稿：《页面路由与页面跳转入门》，计划日期 2026-10-11。

---

声明：本文为个人学习笔记，页面、配置与配图是学习示例；未执行本机编译或设备实测，请结合当前工程验证，保留真实诊断与结果。

返回顶部