路由---页面切换

本次一共需要三个页面切换 需要写出三个文件

实例代码1：

import router from '@ohos.router'; @Entry @Component struct meng{ @State username:string ="" @State password:string ="" @State password2:string ="" build() { Column({space:25}){ Image($r('app.media.cxstudy_1781085599889')) .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 }) } 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 }) } Text("已有账号，立即登录") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/Home" }) }) Button("立即注册") .width('100%') .height(50) .fontSize(24) .onClick(()=>{ if ((this.username!="")&&(this.password2!="")&&(this.password==this.password2)){ router.pushUrl({ url: "pages/yuyuyu" }) } else{ AlertDialog.show({ title:"注册失败", message:'注册的两次密码为空或者不一致，${this.username}' }) } }) } .width('100%') .height('100%') .padding(15) } }

实例代码2：

import router from '@ohos.router'; @Entry @Component struct yuyuyu{ build() { Column({space:25}){ Image($r('app.media.cxstudy_1781085599889')) .width(120) .height(120) .borderRadius(60) Text("登 录") .fontSize(32) .fontWeight(FontWeight.Bold) Row({space:15}){ Text("账 号") .fontSize(26) TextInput() .width("70%") .height(50) } Row({space:15}){ Text("密 码") .fontSize(26) TextInput() .width("70%") .height(50) .type(InputType.Password) } Text("没有账号，立即注册") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/meng" }) }) Button("立 即 登 录") .width('100%') .height(50) .fontSize(24) .onClick(()=>{ router.pushUrl({ url:"pages/Home" }) }) } .width('100%') .height('100%') .padding(15) } }

实例代码3：

import router from '@ohos.router'; @Entry @Component struct HomePage { @State username: string = "" onPageShow(): void { const params = router.getParams() as Record<string, string> if (params) { this.username = params.username } } build() { Column() { Text(`你好 ${this.username}`) } } }

特别注意：需要在json文件添加本文件名

如图所示：

成果展示1：

成果展示2：

成果展示3：