【鸿蒙心迹】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。声明本文为个人学习笔记页面、配置与配图是学习示例未执行本机编译或设备实测请结合当前工程验证保留真实诊断与结果。返回顶部

企业数字化 ERP 产品动态

相关推荐

【鸿蒙心迹】HarmonyOS笔记20：列表点击与事件处理

🔥 个人主页： 杨利杰YJlio ❄️ 个人专栏： 《Windows 疑难杂症与工单复盘案例库》《Sysinternals实战教程》《WINDOWS教程》《Windows PowerShell 实战》《IOS插件分析测试》《超简单：用Python让Excel飞起来》… · 2026/11/4 2:14:05

Windows 驱动管理一篇讲透：Driver Store Explorer 到底怎么用

Windows 驱动管理一篇讲透：Driver Store Explorer 到底怎么用【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 上次重装系统，刚装完网卡就识别不了，只… · 2026/11/4 2:13:04

Zotero PDF Translate 完整配置：三步跑通，五个开关让划词翻译顺起来

Zotero PDF Translate 完整配置：三步跑通，五个开关让划词翻译顺起来【免费下载链接】zotero-pdf-translate Translate PDF, EPub, webpage, metadata, annotations, notes to the target language. Support 20 translate services. 项目地址: https:/… · 2026/11/4 2:13:04

不用大模型也能抽 JSON？这个 287M 的小模型跑在 CPU 上，成绩只差 GPT-4o 不到 1 分

不用大模型也能抽 JSON？这个 287M 的小模型跑在 CPU 上，成绩只差 GPT-4o 不到 1 分【免费下载链接】gliner2.5-multi-v1 项目地址: https://ai.gitcode.com/hf_mirrors/fastino/gliner2.5-multi-v1 先问你一个很现实的问题。公司要你把几百份… · 2026/11/4 22:56:55

2026 海关商品归类风险防控：官方裁定、商业工具与技术底座怎么配

引言：归类错误的代价，与三条可用的防线商品归类是进出口通关中技术含量最高的环节之一。HS 编码的确定直接牵动关税税率、监管条件、出口退税与贸易统计，一旦归错，轻则补税、滞港、通关延误，重则引发行政处罚乃至刑事追… · 2026/11/4 22:55:54

2026 施工安全智能排查选型：五条技术路线，各自解决哪一层问题

引言：隐患排查的智能化，不是"装个摄像头"就能完成的建筑施工是安全事故高发行业。传统隐患排查依赖人工巡检，覆盖范围有限、判断标准主观、响应周期长，这些短板业界早已共识。过去几年，大量项目上线了视频监… · 2026/11/4 22:55:54

黑苹果 EFI 自动生成：OpCore-Simplify 快速构建 OpenCore 的完整流程

黑苹果 EFI 自动生成：OpCore-Simplify 快速构建 OpenCore 的完整流程【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore-Simplify 是一… · 2026/11/4 22:52:50

Ice 菜单栏管理器：5 分钟隐藏并重排顶部图标

Ice 菜单栏管理器：5 分钟隐藏并重排顶部图标【免费下载链接】Ice Powerful menu bar manager for macOS 项目地址: https://gitcode.com/GitHub_Trending/ice/Ice 周五下午给客户做演示前，你抬头扫了一眼屏幕顶部：二十几个应用图标挤… · 2026/11/4 22:52:50

GLiFormer Large v1架构深度解析：DeBERTa编码器+多任务头设计原理

人工智能NLP大模型【免费下载链接】gliformer-large-v1 项目地址： https://ai.gitcode.com/hf_mirrors/knowledgator/gliformer-large-v1 点击查看免费下载本文用通俗的方式解析 GLiFormer Large v1 的架构设计：一个 5.76 亿参数的 DeBERTa 编码器如… · 2026/11/4 22:51:41

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49