鸿蒙DevEco Studio 简单实现：使用页面路由实现登录跳转和返回功能。_鸿蒙deveco studio设计手机登录页面

使用页面路由实现登录跳转和返回功能。

1.创建一个登录页面

在src/main/ets/pages中创建login.ets的登录页面

import router from '@ohos.router'
@Entry
@Component
struct Login {
  @State message: string = 'Hello World'
  @State username:string=''
  build() {
    Row() {
      Column() {
        Text("用户登录页面")
        TextInput({placeholder:"请输入用户名"})
          .onChange((value)=>{
            this.username=value
          })
        TextInput({placeholder:"请输入密码"})
        Button('登录')
          .onClick(()=>{
            router.pushUrl({url:"pages/home",params:{"username":this.username}})
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.创建登录成功后显示的页面

在同一路径下创建home.ets的页面

import router from '@ohos.router'
@Entry
@Component
struct Home {
  @State message: string = '登录成功'
  @State name:string=router.getParams()['username']
  build() {
    Row() {
      Column() {
        Text(this.name+this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('返回到登录页')
          .onClick(()=>{
            // router.back()
            router.back({url:'pages/login'})
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

实现结果：