（一）页面注册
import router from '@ohos.router'; @Entry @Component struct RouterLogin{ @State username:string="" @State password:string="" build() { Column({space:25}){ Image($r('app.media.7788')).width(120).height(120).borderRadius(60) Text("登 录") .fontSize(32).fontWeight(FontWeight.Bolder) Row(){ Text("账号").fontSize(26).width('40%').textAlign(TextAlign.Center) TextInput({text:this.username}).width('60%').height(50) .onChange((value:string)=>{ this.username = value}) } Row(){ Text("密码").fontSize(26).width('40%').textAlign(TextAlign.Center) TextInput({text:this.password}).width('60%').height(50).type(InputType.Password) .onChange((value:string)=>{ this.password = value}) } Text("没有账号，立即注册").fontSize(22).fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterRegister" }) } ) Button("立 即 登 录").width('100%').height(50).fontSize(24) .onClick(()=>{ if ((this.username !== "") && (this.password !== "")) { router.pushUrl({ url: "pages/HomePage", params: { username: this.username, password: this.password } }) } else { AlertDialog.show({ title: "登录失败", message: "用户名或密码不能为空" })} }) } .width('100%').height('100%').padding(15) } }1. 头部导入与页面基础声明
import router from '@ohos.router'; @Entry @Component struct RouterRegister{import router from '@ohos.router'：导入鸿蒙路由模块，用于页面之间跳转、传递参数。
@Entry：标识这是独立页面入口。
@Component：自定义组件装饰器，声明下面的RouterRegister是页面组件。
struct RouterRegister：页面结构体。
2.响应式状态变量
@State username:string="" @State password:string="" @State password2:string=""username：存储账号输入框内容
password：存储密码输入框内容
password2：存储确认密码输入框内容
3.build () 函数：页面 UI 布局，整体垂直布局column，中间穿插水平布局row
3.1 顶部头像 + 标题
Column({space:25}){ Image($r('app.media.7788')).width(120).height(120).borderRadius(60) Text("注 册").fontSize(32).fontWeight(FontWeight.Bolder)1.添加图片作为头像，设置宽120，高120，弧度60的圆形。
2.输入文本标题“注册”，字号32，字体加粗
3.2账号输入行（Row 横向布局）
Row(){ Text("账号").fontSize(26).width('40%').textAlign(TextAlign.Center) TextInput({text:this.username}).width('60%').height(50) .onChange((value:string)=>{ this.username = value}) }1.输入文本‘’账号“，左边文字占 40% 宽度，输入框占 60%。
2.TextInput：输入框，默认显示绑定的username变量。
3..onChange()：输入内容变化时触发，把输入值同步给username，实现双向绑定
3.3密码输入行
Row(){ Text("密码").fontSize(26).width('40%').textAlign(TextAlign.Center) TextInput({text:this.password}).width('60%').height(50).type(InputType.Password) .onChange((value:string)=>{ this.password = value}) } Row(){ Text("确认密码").fontSize(26).width('40%').textAlign(TextAlign.Center) TextInput({text:this.password2}).width('60%').height(50).type(InputType.Password) .onChange((value:string)=>{ this.password2 = value }) }1.type(InputType.Password)：输入框隐藏明文，显示密码圆点。逻辑和账号输入框一致，绑定password。
2.绑定password2，用于二次输入密码校验
3.4跳转登录文字
Text("已有账号，立即登录") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterLogin" }) })1..onClick()：点击事件
2.router.pushUrl()：路由跳转 API，打开新页面，跳转到登录页RouterLogin。
3.5注册按钮核心逻辑
Button("立即注册") .width('100%').height(50).fontSize(24).onClick(()=>{ if ((this.username !== "") && (this.password !== "")) { router.pushUrl({ url: "pages/HomePage", params: { username: this.username, password: this.password } }) } else { AlertDialog.show({ title: "注册失败", message: "用户名或密码不能为空" }) } })表单校验：判断账号、密码是否为空，确认输入内容。
成功分支router.pushUrl
跳转到首页HomePageparams：路由传参，把用户输入的账号、密码传递给首页页面接收使用。
失败分支AlertDialog.show()：弹出系统提示弹窗，提示注册失败原因
3.6外层布局
.width('100%').height('100%').padding(15)四周预留 15px 内边距
(二)页面登录
import router from '@ohos.router'; @Entry @Component struct RouterLogin{ @State username:string="" @State password:string="" build() { Column({space:25}){ Image($r('app.media.7788')).width(120).height(120).borderRadius(60) Text("登 录") .fontSize(32).fontWeight(FontWeight.Bolder) Row(){ Text("账号").fontSize(26).width('40%').textAlign(TextAlign.Center) TextInput({text:this.username}).width('60%').height(50) .onChange((value:string)=>{ this.username = value}) } Row(){ Text("密码").fontSize(26).width('40%').textAlign(TextAlign.Center) TextInput({text:this.password}).width('60%').height(50).type(InputType.Password) .onChange((value:string)=>{ this.password = value}) } Text("没有账号，立即注册").fontSize(22).fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterRegister" }) } ) Button("立 即 登 录").width('100%').height(50).fontSize(24) .onClick(()=>{ if ((this.username !== "") && (this.password !== "")) { router.pushUrl({ url: "pages/HomePage", params: { username: this.username, password: this.password } }) } else { AlertDialog.show({ title: "登录失败", message: "用户名或密码不能为空" })} }) } .width('100%').height('100%').padding(15) } }解释同上。
（三）跳转页面
{ "src": [ "pages/Index", "pages/second", "pages/RouterRegister", "pages/RouterLogin" ] }main_pages.json配置增加注册页和登录页运行
点击已有账号立即登录和没有账号，立即注册实现跳转！！！！！！！
（四）页面接收路由传参
A 页面传参跳转 → B 页面接收参数
import router from '@ohos.router'; @Entry @Component struct HomePage { @State username:string = "" onPageShow(): void { const params = router.getParams() as Record<string,string> if (params.username) { this.username = params.username } } build() { Column() { Text(`你好 ${this.username}`) } } }1.头部导入
import router from '@ohos.router';导入系统路由模块router，用于获取上一页传递过来的参数、页面跳转。
2.页面组件声明
@Entry @Component struct HomePage { @State username:string = "" }@State username:string = ""
响应式变量，用来接收上一页传来的用户名；
初始为空字符串，拿到参数后自动刷新页面文字。
3.页面生命周期函数 onPageShow
onPageShow(): void { const params = router.getParams() as Record<string,string> if (params.username) { this.username = params.username } }onPageShow()页面生命周期
触发时机：页面每次显示时执行
router.getParams()
作用：获取跳转当前页面时，上一页通过pushUrl传递的参数；
返回值默认是Object | null，as Record<string,string>是类型断言，告诉 TS 这是{键:字符串值}格式对象，方便直接点取params.username。
4.build 渲染布局
build() { Column() { Text(`你好 ${this.username}`) } }垂直布局Column，内部文本使用模板字符串拼接用户名
当onPageShow给username赋值后，@State触发 UI 自动更新，文字实时变化。
`你好 ${this.username}`：模板字符串
`反引号包裹文本，支持${变量名}嵌入变量；
${this.username}会读取页面@State修饰的响应式变量username的值，拼接进文字。
