一、前言

在鸿蒙应用开发中，多页面跳转、页面间数据传递是最基础且高频的开发需求。本文结合完整登录注册业务场景，搭建登录页、注册页、首页三个页面，实现登录↔注册互相切换、登录成功携带账号参数跳转首页、首页接收展示账号信息全套流程，全程基于 @ohos.router 路由模块完成，贴合日常开发真实业务逻辑。

二、整体项目结构与页面规划

1. 页面拆分说明

本次案例一共拆分 3 个独立页面，各司其职：

1. RouterLogin.ets：登录页面，提供账号、密码输入框，支持跳转到注册页，登录成功后携带用户名跳转首页
2. RouterRegister.ets：注册页面，提供账号、密码、确认密码输入框，支持返回登录页面
3. home.ets：首页，接收登录页传递的账号参数，页面加载完成后展示欢迎文字

2. 页面布局统一设计规范

三个页面采用统一 UI 视觉风格，保证产品体验一致性：

1. 顶部圆形头像图片，统一尺寸、圆角样式
2. 页面大标题（登录 / 注册）加粗放大，居中展示
3. 账号、密码模块使用 Row 横向布局，左侧固定文字标签，右侧输入框均分宽度
4. 底部蓝色功能按钮（立即登录 / 立即注册），页面元素纵向均匀留白

3. 路由核心能力说明

本次案例核心依赖鸿蒙内置 @ohos.router 路由工具，用到两大核心能力：

• router.pushUrl：打开新页面，保留当前页面栈，支持携带自定义参数传递到目标页面
• router.back：返回上一级页面，用于登录、注册页互相切换
• router.getParams：目标页面获取上一页传递过来的参数，完成页面传参

三、登录页面功能讲解（RouterLogin.ets）

1. 页面 UI 布局拆解

页面整体使用 Column 纵向布局，设置统一间距分层展示元素：

1. 头部圆形头像图片，固定宽高 120，圆角 60 实现圆形效果
2. “登录” 大标题，字号加大、加粗居中
3. 账号输入区域：Row 横向容器，左侧 “账号” 文字占页面 40% 宽度居中，右侧 TextInput 输入框占 60% 宽度，双向绑定 username 状态变量
4. 密码输入区域：布局逻辑同账号输入框，绑定 password 状态变量
5. 文字跳转提示 “没有账号，立即注册”，点击可切换到注册页面
6. 底部蓝色「立即登录」功能按钮，点击执行登录跳转逻辑

2. 页面逻辑功能

1. 使用 @State 装饰器定义 username、password 响应式变量，输入框输入内容实时同步更新变量
2. 跳转注册文字点击事件：调用 router.pushUrl 打开注册页面地址，实现页面切换
3. 登录按钮点击事件：简单校验账号非空后，通过路由跳转首页，同时把 username 账号作为参数传递给首页

四、注册页面功能讲解（RouterRegister.ets）

1. 页面 UI 布局拆解

整体布局结构和登录页面保持统一，仅新增确认密码输入行：

1. 顶部同样圆形头像 +“注册” 加粗标题
2. 三层输入区域：账号、密码、确认密码，布局比例、尺寸和登录页完全统一
3. 底部提示文字 “已有账号，立即登录”，点击返回登录页面
4. 底部蓝色「立即注册」按钮

2. 页面逻辑功能

1. @State 定义 username、password、password2 三个响应变量，分别绑定三个输入框
2. 登录跳转文字点击事件：调用 router.back () 直接返回上一页（登录页），复用页面栈不新增页面
3. 注册按钮可扩展密码一致性校验逻辑，本次基础案例仅完成页面跳转基础框架

五、首页接收页面传参（home.ets）

1. 页面生命周期接收参数

首页核心逻辑是接收登录页传递的账号数据，依赖页面生命周期 onPageShow：

1. 页面每次显示时触发 onPageShow 钩子函数
2. 通过 router.getParams () 获取路由传递过来的所有参数，强转为键值对象
3. 提取 key 为 username 的账号值，赋值给页面 @State 变量，实现数据响应更新

2. 页面 UI 展示

页面结构极简，仅使用 Column 容器包裹文本组件，动态拼接用户输入的账号，展示 “你好 xxx” 欢迎文案，验证页面传参是否生效。

六、页面跳转交互完整流程梳理

1. 初始打开登录页 → 点击 “没有账号，立即注册”，pushUrl 打开注册页
2. 注册页点击 “已有账号，立即登录”，router.back 退回到登录页
3. 登录页输入账号，点击立即登录，携带账号参数 pushUrl 跳转首页
4. 首页触发 onPageShow 生命周期，读取路由参数，展示输入的账号名称

七、开发踩坑与注意事项

1. 路由模块必须手动导入 import router from '@ohos.router';，否则无法调用跳转、传参 API
2. 页面传参仅支持字符串类型数据，复杂对象需要 JSON 序列化后传递
3. 获取路由参数必须在 onPageShow 中执行，不要写在 build 渲染函数内，会出现参数读取异常
4. @State 变量用于绑定输入框，必须搭配 onChange 回调实现双向数据同步
5. 页面跳转路径需要和 main_pages.json 中配置的页面路由地址保持一致，否则跳转失败

八、总结

本文基于真实登录注册业务场景，完整覆盖鸿蒙 ArkTS 页面路由、跨页面传参两大核心知识点，统一 UI 布局降低多页面开发维护成本。案例可直接复用扩展：增加账号密码校验、本地存储、网络登录请求等业务逻辑，适合鸿蒙初学者入门路由开发，快速掌握多页面应用开发基础流程。