核心内容摘要
解锁“性巴克MBA”：重塑认知，拥抱高质量亲密关系的新篇章
网罗开发小红书、快手、视频号同名大家好我是展菲目前在上市企业从事人工智能项目研发管理工作平时热衷于分享各种编程领域的软硬技能知识以及前沿技术包括iOS、前端、Harmony OS、Java、Python等方向。
在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。
图书作者《ESP32-C3 物联网工程开发实战》图书作者《SwiftUI 入门进阶与实战》超级个体COC上海社区主理人特约讲师大学讲师谷歌亚马逊分享嘉宾科技博主华为HDE/HDG我的博客内容涵盖广泛主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。
我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告同时也会提供产品优缺点分析、横向对比并分享技术沙龙与行业大会的参会体验。
我的目标是为读者提供有深度、有实用价值的技术洞察与分析。
展菲您的前沿技术领航员 大家好我是展菲 全网搜索“展菲”即可纵览我在各大平台的知识足迹。
公众号“Swift社区”每周定时推送干货满满的技术长文从新兴框架的剖析到运维实战的复盘助您技术进阶之路畅通无阻。
微信端添加好友“fzhanfei”与我直接交流不管是项目瓶颈的求助还是行业趋势的探讨随时畅所欲言。
最新动态2025 年 3 月 17 日快来加入技术社区一起挖掘技术的无限潜能携手迈向数字化新征程文章目录前言路由与页面栈配置路由表 main_pages.json跳转pushUrl 与 replaceUrl目标页接收参数返回与传参生命周期与路由导航类组件Tabs 与 NavRouterTabs 简单用法NavRouter 与 NavDestination
常见问题
总结前言HarmonyOS 应用通常由多个页面组成页面之间的跳转、传参以及返回栈管理都依赖路由与导航能力。
ArkTS 提供了基于「路由」的页面模型理解其用法和生命周期能避免「跳转失败」「参数丢失」「返回键行为异常」等问题。
本文只讲路由与导航的核心 API 和典型用法不贴完整工程方便快速接入和排查问题。
路由与页面栈在 HarmonyOS 中每个「可被路由到的页面」对应一个用Entry装饰的组件路由地址在模块的main_pages.json中配置。
跳转时通过router的 API 压栈或替换页面返回时弹栈。
配置路由表 main_pages.json在src/main/resources/base/profile/main_pages.json中声明页面路径与组件名{src:[pages/Index,pages/Detail,pages/UserCenter]}pages/Index表示ets/pages/Index.ets中导出的Entry页面路由 path 一般为pages/Index未在此声明的页面无法通过路由跳转跳转pushUrl 与 replaceUrlrouter.pushUrl()会在当前栈顶再压入一个新页面router.replaceUrl()会替换当前栈顶页面当前页被销毁无法再返回回来。
无参跳转importrouterfromohos.router// 跳转到详情页可返回router.pushUrl({url:pages/Detail})// 替换当前页为登录页当前页无法返回router.replaceUrl({url:pages/Login})带参跳转router.pushUrl({url:pages/Detail,params:{id:100,from:list}})params会随路由传递在目标页通过router.getParams()读取。
目标页接收参数在详情页例如Detail.ets的onPageShow()或aboutToAppear()中获取参数importrouterfromohos.routerEntryComponentstruct Detail{Stateid:stringStatefrom:stringaboutToAppear(){constparamsrouter.getParams()asRecordstring,Objectif(params){this.idString(params[id]??)this.fromString(params[from]??)}}build(){Column(){Text(id:${this.id}, from:${this.from})}}}注意getParams()返回类型为Object实际使用建议做类型断言或安全取值避免运行时异常。
返回与传参返回上一页用router.back()需要把结果带回上一页时可传paramsrouter.back({url:pages/Index,params:{result:ok,selectedId:200}})上一页在再次显示时例如onPageShow()通过router.getParams()可拿到这次返回携带的params。
注意返回时的params只在「返回目标页」重新显示时有效若目标页已不在栈顶需要自己设计数据回传方式如全局状态、回调接口等。
生命周期与路由页面生命周期和路由紧密相关常用回调有aboutToAppear()页面即将显示前调用一次适合做数据初始化、读router.getParams()onPageShow()每次页面显示时调用首次进入、从子页返回都会触发适合刷新列表、重新读返回参数aboutToDisappear()页面即将销毁前调用适合释放资源、取消订阅典型用法EntryComponentstruct Detail{aboutToAppear(){constparamsrouter.getParams()// 根据 params 请求详情接口、设置标题等}onPageShow(){// 从子页返回时可能带回 params在这里处理constparamsrouter.getParams()if(paramsparams[refresh]){// 重新拉取数据}}aboutToDisappear(){// 取消网络请求、解绑监听等}}这样能保证「进页拿参数、返回来刷新、离开时收尾」。
导航类组件Tabs 与 NavRouter除了整页跳转ArkUI 还提供 Tab 切换、NavRouter 等「容器内导航」组件用于同一页面内多内容区切换。
Tabs 简单用法EntryComponentstruct TabDemo{StatecurrentIndex:number0BuilderTabBuilder(title:string,index:number){Text(title).fontSize(
.fontColor(this.currentIndexindex?#007AFF:#
.onClick((){this.currentIndexindex})}build(){Tabs({barPosition:BarPosition.Start,index:this.currentIndex}){TabContent(){Text(首页内容)}.tabBar(this.TabBuilder(首页,
)TabContent(){Text(我的内容)}.tabBar(this.TabBuilder(我的,
)}.onChange((index:number){this.currentIndexindex})}}通过index与onChange把「当前选中的 Tab」与State currentIndex同步即可实现点击 Tab 栏和滑动内容联动。
NavRouter 与 NavDestinationNavRouter 配合 NavDestination 可做「侧边/底部导航 多子页」结构点击导航项切换对应的 NavDestination适合设置、个人中心等多级入口。
使用方式为在 NavRouter 下放多个 NavDestination通过navDestination属性绑定用isSelected或路由状态控制当前展示的 Destination具体 API 以当前版本文档为准。
常见问题现象可能原因处理思路pushUrl 报错找不到页面未在 main_pages.json 中配置检查 path 与 json 中 src 一致、编译后资源是否包含该页目标页拿不到 params在 aboutToAppear 之前就用了 getParams、或未用 params 传在 aboutToAppear/onPageShow 里取参pushUrl 时带上 params返回后上一页数据不更新未在 onPageShow 里处理返回 params在 onPageShow 中 getParams 并刷新列表/表单替换页后仍能返回用了 pushUrl 而非 replaceUrl登录后跳首页等「不可回退」场景用 replaceUrl
总结HarmonyOS 页面路由依赖main_pages.json与routerpushUrl/replaceUrl负责跳转与传参getParams()在目标页取参back()可带参返回。
结合aboutToAppear、onPageShow、aboutToDisappear处理生命周期即可完成「进页初始化、返回来刷新、离开收尾」。
Tabs、NavRouter 等组件用于单页内的多内容区导航与整页路由配合使用即可覆盖大部分导航场景。