鸿蒙 ArkTS 页面路由传参实战完整总结

一、今日学习核心内容

今天完整实现了登录页 - 注册页 - 首页三页面路由跳转、表单双向绑定、页面间参数传递、表单校验弹窗提示全套业务逻辑，覆盖 ArkTS 路由核心知识点与踩坑解决方案。

二、基础前置：路由模块导入

所有需要页面跳转的文件，顶部必须导入路由 API，否则无法使用pushUrl

arkts

import router from '@ohos.router';

三、页面跳转基础 API

1. pushUrl：入栈跳转（保留返回键）

会新增页面栈，多次点击会堆积页面，栈上限 32，溢出后跳转失效

arkts

router.pushUrl({ url: "pages/页面文件名" })

2. replaceUrl：替换当前页面（推荐登录 / 注册场景）

销毁当前页面，不会增加页面栈，永久不会触发栈溢出报错，适合不需要返回的场景

arkts

router.replaceUrl({ url: "pages/home" })

3. 跳转携带参数（页面传参核心）

通过params对象传递数据，目标页面使用router.getParams()接收

arkts

router.pushUrl({ url:"pages/home", params:{ username:this.username } })

四、@State 双向绑定表单（注册 / 登录表单核心）

1. 定义响应式变量

@State修饰变量，变量修改后页面 UI 自动刷新，用于绑定输入框

arkts

@State username:string="" @State password:string=""

2. TextInput 双向绑定写法

输入框传入{text:变量}，搭配onChange实时同步输入内容，实现双向绑定

arkts

TextInput({text:this.username}) .width('60%') .height(50) .onChange((value:string)=>{ this.username=value })

3. 密码输入框加密

添加.type(InputType.Password)隐藏输入内容

arkts

TextInput({text:this.password}) .type(InputType.Password)

五、表单校验 + 弹窗提示（promptAction 弹窗）

1. 弹窗模块导入

弹窗需要单独导入，之前踩坑点：无导入直接调用会标红报错

arkts

import AlertDialog from '@ohos.promptAction';

2. 正确弹窗 API：showDialog

低版本 HarmonyOS 无AlertDialog.show()，统一使用showDialog

arkts

AlertDialog.showDialog({ title:"注册失败", message:`账号密码为空或两次密码不一致，当前账号：${this.username}` })

3. 注册页完整校验逻辑

同时判断三个输入框非空 + 两次密码相等，全部满足才允许跳转主页

arkts

if ((this.username!="") && (this.password!="") && (this.password2!="") && (this.password==this.password2)){ // 校验通过，跳转主页并传参 router.pushUrl({url:"pages/home",params:{username:this.username}}) }else{ // 校验失败，弹出提示弹窗 AlertDialog.showDialog({title:"注册失败",message:"提示文字"}) }

六、目标页面接收路由参数

使用生命周期onPageShow（页面每次显示都会执行）获取传递过来的参数

arkts

onPageShow(): void { // 强转类型为字符串对象，解决Object赋值string报错 const params = router.getParams() as Record<string, string> if (params){ this.username = params.username } }

踩坑点：router.getParams()默认返回Object，直接赋值 string 变量会类型报错，必须用as Record<string, string>强制类型转换。

七、页面布局统一规范

1. 外层Column设置.width('100%').height('100%')占满全屏
2. .justifyContent(FlexAlign.Center)实现页面内容垂直居中
3. 表单行统一使用Row分割：左侧文字 40% 宽度居中，输入框 60% 宽度，页面样式统一美观

arkts

Row(){ Text("账号") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput({text:this.username}) .width('60%') .height(50) }

八、必配路由注册文件 main_pages.json

所有页面必须在src数组注册，否则跳转找不到页面，点击无响应

json

{ "src": [ "pages/denglu", "pages/zhuce", "pages/home" ] }

修改 json 文件后必须重启预览器，配置才会生效。

九、今日踩坑汇总（避坑重点）

1. 弹窗标红：忘记导入AlertDialog模块 / 错误使用show()，替换为showDialog()
2. 参数赋值报错：getParams()返回 Object，未强转Record<string, string>
3. 跳转无反应：页面未在main_pages.json注册、文件名大小写不匹配
4. 第二行文字消失：布局未设置垂直居中，内容被挤出可视区域
5. 页面栈超限：频繁 pushUrl 堆积页面，推荐业务场景使用 replaceUrl 替换跳转
6. 输入框无法同步值：TextInput 缺少{text:this.变量}双向绑定

十、完整业务流程梳理

1. 登录页：输入账号密码，点击登录校验非空 → 跳转首页传递用户名
2. 注册页：输入账号、密码、确认密码，校验空值 + 密码一致性 → 跳转首页
3. 首页：页面加载自动接收路由传递的用户名，展示欢迎文本
4. 页面互跳：登录页可跳转注册页，注册页可跳转登录页，实现双向切换