页面跳转 一页面注册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:stringusername存储账号输入框内容password存储密码输入框内容password2存储确认密码输入框内容3.build () 函数页面 UI 布局整体垂直布局column中间穿插水平布局row3.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 Recordstring,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.页面生命周期函数 onPageShowonPageShow(): void { const params router.getParams() as Recordstring,string if (params.username) { this.username params.username } }onPageShow()页面生命周期触发时机页面每次显示时执行router.getParams()作用获取跳转当前页面时上一页通过pushUrl传递的参数返回值默认是Object | nullas Recordstring,string是类型断言告诉 TS 这是{键:字符串值}格式对象方便直接点取params.username。4.build 渲染布局build() { Column() { Text(你好 ${this.username}) } }垂直布局Column内部文本使用模板字符串拼接用户名当onPageShow给username赋值后State触发 UI 自动更新文字实时变化。你好 ${this.username}模板字符串反引号包裹文本支持${变量名}嵌入变量${this.username}会读取页面State修饰的响应式变量username的值拼接进文字。