一、实现思路

• 首页放一个 “下一页” 按钮，点击跳转到第二页。

• 第二页放一个 “返回” 按钮，点击回到上一页。

二、结构组成

• index.ets 首页，显示文字+跳转按钮
• Second.ets  第二页，显示文字+返回按钮
• main_pages.json 实现两个页面同步

三、核心代码

1.index.ets 代码

@Entry

@Component
struct Index {
  @State message: string = '你好，世界！';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button(){
          Text('下一页')
            .fontSize(40)
            .fontWeight(FontWeight.Bolder)
        }
        .type(ButtonType.Capsule)
        .margin({
          top:20
        })
        .backgroundColor('#258525')
        .width('50%')
        .height('10%')
        .onClick(()=>{
          console.info('Successful')
          let uiContext : UIContext = this.getUIContext();
          let router = uiContext.getRouter();

          router.pushUrl({url:'pages/Second'}).then(()=>{
            console.info('successful')
          }).catch((err:BusinessError) =>{
            console.error('fall')
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.Second.ets 代码

@Entry
@Component
struct Second {
  @State message : string = '第二个页面';
  build() {
    Row(){
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button() {
          Text('返回')
            .fontSize(40)
            .fontWeight(FontWeight.Bolder)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#258525')
        .width('50%')
        .height('10%')
        .onClick(()=> {
          console.info('Successful')
          let uiContext: UIContext = this.getUIContext();
          let router = uiContext.getRouter();

          router.back();
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3.main_pages.json 代码

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]