鸿蒙多功能工具箱开发实战(四)-路由导航与页面跳转前言路由导航是移动应用开发的核心功能之一。本文将详细讲解HarmonyOS中的路由机制包括页面注册、路由跳转、参数传递、返回处理等核心功能。一、HarmonyOS路由机制概述1.1 路由配置文件HarmonyOS使用main_pages.json配置页面路由{src:[pages/Index,pages/calculator/RelativeCalculator,pages/calculator/DateCalculator,pages/calendar/LunarCalendar]}重要规则所有页面必须在src数组中注册路径相对于entry/src/main/ets/不需要.ets后缀1.2 路由APIHarmonyOS提供ohos.router模块处理路由importrouterfromohos.router// 页面跳转router.pushUrl({url:pages/Detail})// 带参数跳转router.pushUrl({url:pages/Detail,params:{id:123,name:test}})// 返回上一页router.back()// 返回并传参router.back({params:{result:success}})// 替换当前页面router.replaceUrl({url:pages/Login})// 清空路由栈并跳转router.clear()router.pushUrl({url:pages/Index})二、页面注册实践2.1 创建新页面创建entry/src/main/ets/pages/calculator/RelativeCalculator.etsimportrouterfromohos.routerEntryComponentstruct RelativeCalculator{build(){Column(){// 标题栏Row(){Text(←).fontSize(24).onClick((){router.back()})Text(亲戚称呼计算器).fontSize(18).fontWeight(FontWeight.Bold).layoutWeight(1).textAlign(TextAlign.Center)Text( )// 占位.fontSize(24)}.width(100%).height(56).padding({left:16,right:16}).justifyContent(FlexAlign.SpaceBetween)// 内容区域Column(){Text(计算功能开发中...).fontSize(16).fontColor(#999999)}.layoutWeight(1).justifyContent(FlexAlign.Center)}.width(100%).height(100%)}}图 1 计算工具页面2.2 注册页面路由在entry/src/main/resources/base/profile/main_pages.json中添加{src:[pages/Index,pages/calculator/RelativeCalculator]}三、路由跳转实现3.1 基本跳转importrouterfromohos.router// 在工具卡片点击时跳转ToolCard({name:亲戚称呼计算器,icon:‍‍‍,description:计算亲戚关系的称呼,color:#4A90E2,onCardClick:(){router.pushUrl({url:pages/calculator/RelativeCalculator})}})3.2 带参数跳转// 跳转并传递参数router.pushUrl({url:pages/calculator/DateCalculator,params:{mode:range,// 计算模式defaultDate:2024-01-01}})// 目标页面接收参数EntryComponentstruct DateCalculator{// 获取路由参数privateparamsrouter.getParams()asRecordstring,Objectprivatemode:stringthis.params?.modeasstring||singleprivatedefaultDate:stringthis.params?.defaultDateasstring||build(){Column(){Text(模式:${this.mode})Text(默认日期:${this.defaultDate})}}}3.3 路由模式// Standard模式默认新页面入栈router.pushUrl({url:pages/Detail,mode:router.RouterMode.Standard})// Single模式如果页面已存在移到栈顶router.pushUrl({url:pages/Index,mode:router.RouterMode.Single})四、页面返回处理4.1 基本返回// 返回上一页router.back()// 返回到指定页面router.back({url:pages/Index})4.2 返回传参// 详情页返回时传参EntryComponentstruct DetailPage{build(){Column(){Button(确认选择).onClick((){router.back({params:{selectedValue:选项A,selectedId:1}})})}}}// 上级页面接收返回参数EntryComponentstruct ListPage{// 监听页面显示aboutToAppear(){// 获取返回参数constparamsrouter.getParams()if(params?.selectedValue){console.log(用户选择:,params.selectedValue)}}}4.3 使用onBackPressed拦截返回EntryComponentstruct EditorPage{StatehasUnsavedChanges:booleanfalsebuild(){Column(){// 编辑内容...}}// 拦截返回事件onBackPress():boolean{if(this.hasUnsavedChanges){AlertDialog.show({title:提示,message:有未保存的更改确定要离开吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:确定,action:(){router.back()}}})returntrue// 拦截返回}returnfalse// 不拦截}}五、路由栈管理5.1 获取路由栈信息importrouterfromohos.router// 获取当前路由栈长度letstackLengthrouter.getLength()console.log(路由栈长度:,stackLength)// 获取路由状态letstaterouter.getState()console.log(当前页面:,state.name)console.log(页面路径:,state.path)5.2 替换页面// 替换当前页面不会增加路由栈router.replaceUrl({url:pages/Login})// 使用场景登录成功后跳转主页// 此时用户按返回键不会回到登录页5.3 清空路由栈// 清空所有页面router.clear()// 常用于退出登录functionlogout(){// 清除用户数据clearUserData()// 清空路由栈并跳转登录页router.clear()router.replaceUrl({url:pages/Login})}六、实际应用示例6.1 通用标题栏组件创建components/TitleBar.etsimportrouterfromohos.router/** * 通用标题栏组件 */Componentexportstruct TitleBar{Proptitle:stringPropshowBack:booleantrueonBackClick?:()voidbuild(){Row(){// 返回按钮if(this.showBack){Text(←).fontSize(24).onClick((){if(this.onBackClick){this.onBackClick()}else{router.back()}})}else{Text()// 占位.width(24)}// 标题Text(this.title).fontSize(18).fontWeight(FontWeight.Bold).layoutWeight(1).textAlign(TextAlign.Center)// 右侧占位Text().width(24)}.width(100%).height(56).padding({left:16,right:16}).justifyContent(FlexAlign.SpaceBetween).backgroundColor(#FFFFFF).shadow({radius:2,color:#1A000000,offsetY:1})}}6.2 使用标题栏组件import{TitleBar}from../components/TitleBarEntryComponentstruct RelativeCalculator{build(){Column(){// 标题栏TitleBar({title:亲戚称呼计算器})// 内容Column(){// 页面内容...}.layoutWeight(1)}.width(100%).height(100%)}}6.3 路由工具类创建common/RouterUtils.etsimportrouterfromohos.router/** * 路由工具类 */exportclassRouterUtils{// 页面路径常量staticreadonlyPAGES{INDEX:pages/Index,RELATIVE_CALCULATOR:pages/calculator/RelativeCalculator,DATE_CALCULATOR:pages/calculator/DateCalculator,LUNAR_CALENDAR:pages/calendar/LunarCalendar}/** * 跳转到指定页面 */staticpush(url:string,params?:Recordstring,Object):void{router.pushUrl({url:url,params:params||{}}).then((){console.log(路由跳转成功:,url)}).catch((err:Error){console.error(路由跳转失败:,err.message)})}/** * 替换当前页面 */staticreplace(url:string,params?:Recordstring,Object):void{router.replaceUrl({url:url,params:params||{}})}/** * 返回上一页 */staticback(params?:Recordstring,Object):void{if(params){router.back({params:params})}else{router.back()}}/** * 获取路由参数 */staticgetParamsT():T|null{constparamsrouter.getParams()returnparams?(paramsasT):null}/** * 判断是否可以返回 */staticcanGoBack():boolean{returnrouter.getLength()1}}6.4 使用路由工具类import{RouterUtils}from../common/RouterUtils// 跳转RouterUtils.push(RouterUtils.PAGES.RELATIVE_CALCULATOR,{mode:edit})// 返回RouterUtils.back({result:success})// 获取参数interfaceDateParams{mode:stringdefaultDate:string}constparamsRouterUtils.getParamsDateParams()七、路由动画7.1 页面转场动画// 在页面组件中定义转场动画EntryComponentstruct DetailPage{// 页面入场动画pageTransition(){PageTransitionEnter({duration:300}).slide(SlideEffect.Right)PageTransitionExit({duration:300}).slide(SlideEffect.Left)}build(){Column(){// 页面内容}}}7.2 共享元素转场// 列表页EntryComponentstruct ListPage{build(){Column(){Image($r(app.media.icon)).width(100).height(100).sharedTransition(shared_image,{duration:300}).onClick((){router.pushUrl({url:pages/Detail})})}}}// 详情页EntryComponentstruct DetailPage{build(){Column(){Image($r(app.media.icon)).width(300).height(300).sharedTransition(shared_image,{duration:300})}}}八、小结本文详细讲解了HarmonyOS路由导航的实现核心要点✅ main_pages.json 配置页面路由✅ router.pushUrl() 页面跳转✅ router.getParams() 获取路由参数✅ router.back() 页面返回✅ onBackPress() 拦截返回事件✅ router.replaceUrl() 替换页面✅ 路由工具类封装下一篇文章将讲解主题配色与全局样式管理。系列文章导航下期预告鸿蒙多功能工具箱开发实战(五)-主题配色与全局样式管理