OpenHarmony 页面路由与跨页面数据传递全解实战

承接前三篇 ArkUI 组件开发本篇聚焦Router 页面路由导航覆盖页面跳转、返回传参、弹窗路由、命名路由、页面间数据交互搭配完整 ArkTS 案例是多页面应用开发必备内容。一、前言实际项目由多个页面组成首页、详情、个人中心、登录页依靠路由实现页面切换。OpenHarmony ArkUI 提供两种路由方案Router系统路由页面跳转首选、页面内自定义弹窗路由同时配套正向传参、反向回传数据能力。本文从基础跳转→参数传递→综合项目案例循序渐进。前置配置路由需要在src/main/resources/base/profile/main_pages.json注册页面路径。二、main_pages.json 页面注册说明新建页面后必须配置页面路由路径示例配置json{ src: [ pages/index/index, pages/detail/detail, pages/login/login ] }index首页入口页面detail详情页login登录页三、Router 基础 API 与基础跳转引入路由模块import router from ohos.router常用方法router.pushUrl()入栈跳转可返回上一页最常用router.replaceUrl()替换当前页面无法返回上一页router.back()返回上一级页面3.1 普通无参跳转首页 index.etsetsimport router from ohos.router Entry Component struct Index { build() { Column({space:20}){ Button(跳转详情页(push)) .width(200) .onClick((){ router.pushUrl({url:pages/detail/detail}) }) Button(替换页面(replace)) .width(200) .onClick((){ router.replaceUrl({url:pages/detail/detail}) }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }3.2 详情页返回detail.etsetsimport router from ohos.router Entry Component struct Detail { build() { Column() { Text(详情页面).fontSize(22) Button(返回首页) .onClick((){ router.back() }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }四、正向页面传参跳转携带数据跳转时通过params携带对象数据目标页面router.getParams()接收。4.1 首页携带参数跳转etsimport router from ohos.router Entry Component struct Index { build() { Column({space:20}){ Button(携带参数跳详情) .width(200) .onClick((){ router.pushUrl({ url:pages/detail/detail, params:{ id:1001, name:OpenHarmony实战教程, price:39.9 } }) }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }4.2 详情页接收参数etsimport router from ohos.router Entry Component struct Detail { State id:number 0 State name:string State price:number 0 aboutToAppear(){ // 生命周期获取路由参数 let data router.getParams() this.id data.id this.name data.name this.price data.price } build() { Column({space:15}) { Text(编号${this.id}).fontSize(18) Text(标题${this.name}).fontSize(18) Text(价格${this.price}).fontSize(18) Button(返回首页).onClick(()router.back()) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }五、返回页面反向回传数据回调传参从子页面返回首页并带回数据借助pushUrl的success回调接收回传参数。5.1 首页代码etsimport router from ohos.router Entry Component struct Index { State backMsg:string goDetail(){ router.pushUrl({url:pages/detail/detail},{ success:(res){ // 监听页面关闭带回的数据 res.result.params (this.backMsg res.result.params.msg) } }) } build() { Column({space:20}){ Button(跳转详情可回传数据) .width(220) .onClick(()this.goDetail()) Text(子页面带回信息this.backMsg).fontSize(18) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }5.2 详情页返回时携带参数etsimport router from ohos.router Entry Component struct Detail { build() { Column() { Button(确认带回数据并返回) .onClick((){ // back携带params参数 router.back({ url:pages/index/index, params:{msg:从详情页返回操作已完成} }) }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }六、页面路由综合实战登录跳转逻辑业务场景未登录点击个人中心→跳转登录页登录成功携带登录状态返回首页。pages/index/index首页etsimport router from ohos.router Entry Component struct Index { State isLogin:boolean false State userName:string goLogin(){ router.pushUrl({url:pages/login/login},{ success:(res){ if(res.result.params){ this.isLogin res.result.params.loginFlag this.userName res.result.params.name } } }) } build() { Column({space:25}){ if(this.isLogin){ Text(欢迎用户${this.userName}已登录).fontSize(20).fontColor(#007DFF) }else{ Text(当前未登录请前往登录).fontSize(18).fontColor(#f56c6c) } Button(前往登录页面) .width(200) .onClick(()this.goLogin()) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }pages/login/login登录页etsimport router from ohos.router Entry Component struct Login { State name:string State pwd:string loginClick(){ // 模拟登录校验 if(this.name this.pwd){ router.back({ params:{ loginFlag:true, name:this.name } }) } } build() { Column({space:18}){ TextInput({placeholder:请输入用户名}) .width(90%) .height(45) .onChange(valthis.nameval) TextInput({placeholder:请输入密码}) .type(InputType.Password) .width(90%) .height(45) .onChange(valthis.pwdval) Button(登录) .width(90%) .height(48) .backgroundColor(#007DFF) .onClick(()this.loginClick()) Button(取消返回) .width(90%) .backgroundColor(#999) .onClick(()router.back()) } .width(100%) .height(100%) .padding(20) } }七、开发规范与路由优化总结1. API 选用规范需要保留返回栈详情、登录pushUrl不需要返回启动页→首页replaceUrl2. 传参注意事项简单字符串、数字、对象用路由 params 传递大批量全局数据建议使用 AppStorage 全局存储在aboutToAppear生命周期中获取路由参数不要在 build 直接取值避免渲染异常。3. 项目优化技巧统一封装路由工具类把页面路径统一管理避免硬编码 URL路由跳转前做判空防止路径书写错误导致跳转失败大型项目拆分模块页面按业务分包user、goods、mine。