个人主页杨利杰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/IndexDetail.ets详情页pages/Detail在采用 main_pages.json 配置页面的工程中最小示意为{src:[pages/Index,pages/Detail]}这里的名称不带 .ets 扩展名。实际文件通常位于模块资源配置中应先核对当前模块的页面配置引用不能把这份最小示意直接覆盖已有页面清单。目标页面文件、注册名称和跳转 URL三处必须对应。三、在首页按钮事件中调用 pushUrl下方示例采用与当前 UI 上下文绑定的 Router 调用方式。将代码放在首页 Index.ets 中按钮点击时才调用 openDetail。import{BusinessError}fromkit.BasicServicesKit;EntryComponentstruct 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 中定义详情页EntryComponentstruct 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。声明本文为个人学习笔记页面、配置与配图是学习示例未执行本机编译或设备实测请结合当前工程验证保留真实诊断与结果。返回顶部 
长河君 · 2026/11/4 2:14:10 · 阅读 1.2k 【鸿蒙心迹】HarmonyOS笔记21：页面路由与跳转入门
个人主页杨利杰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/IndexDetail.ets详情页pages/Detail在采用 main_pages.json 配置页面的工程中最小示意为{src:[pages/Index,pages/Detail]}这里的名称不带 .ets 扩展名。实际文件通常位于模块资源配置中应先核对当前模块的页面配置引用不能把这份最小示意直接覆盖已有页面清单。目标页面文件、注册名称和跳转 URL三处必须对应。三、在首页按钮事件中调用 pushUrl下方示例采用与当前 UI 上下文绑定的 Router 调用方式。将代码放在首页 Index.ets 中按钮点击时才调用 openDetail。import{BusinessError}fromkit.BasicServicesKit;EntryComponentstruct 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 中定义详情页EntryComponentstruct 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。声明本文为个人学习笔记页面、配置与配图是学习示例未执行本机编译或设备实测请结合当前工程验证保留真实诊断与结果。返回顶部