🔥个人主页：杨利杰YJlio
❄️个人专栏：《Windows 疑难杂症与工单复盘案例库》 《Sysinternals实战教程》
《WINDOWS教程》 《Windows PowerShell 实战》 《IOS插件分析测试》
《超简单：用Python让Excel飞起来》
🌟让复杂的事情更简单，让重复的工作自动化
文章目录
- 一、先确定两个页面的练习范围
- 二、页面文件与注册名称要对应
- 三、在首页按钮事件中调用 pushUrl
- 四、详情页独立定义，再观察是否真的进入
- 五、区分 pushUrl 与 replaceUrl 的页面栈行为
- 六、失败时同时观察提示与诊断信息
- 七、明确 Router 的学习边界
- 八、把进入与返回写成可复现记录
- 写在最后
- 参考资料
大家好，我是杨利杰 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@Componentstruct Index{@Statemessage:string='';privateopenDetail():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@Componentstruct 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、运行设备和窗口。配置修改前保留原内容，运行记录要包含页面文件、注册名称及实际显示。
调用已发起、目标页已显示和返回正确，是三个需要分别核对的结果。
写在最后
这节我把页面文件、注册名称和路由调用连起来，并补上进入与返回的最小示例。先确认目的地，再确认返回关系，才能继续讨论参数和详情内容。
下一篇学习页面参数传递与详情展示，继续沿着这两个页面增加数据，而不是重新混入一套不对应的导航写法。
参考资料
- OpenHarmony 官方文档：页面路由，用于核对 Router 调用、页面栈与 Navigation 推荐说明。实际 HarmonyOS 工程请查对应 SDK 资料。
- OpenHarmony 官方接口文档：Router，用于查看接口形式与限制。
- 本系列第 021 篇原稿：《页面路由与页面跳转入门》，计划日期 2026-10-11。
声明：本文为个人学习笔记，页面、配置与配图是学习示例；未执行本机编译或设备实测，请结合当前工程验证，保留真实诊断与结果。
返回顶部
