一、功能简介

本篇教你如何在多个页面间进行跳转与返回，配合顶部导航栏，实现简单的页面导航逻辑。适用于多页应用的基础构建。

二、页面结构

entry/
├── src/
│   └── main/
│       └── ets/
│           └── pages/
│               ├── Index.ets         // 首页
│               └── Detail.ets        // 详情页
├── config.json
└── app.json5

三、代码演示

Index.ets

@Entry
@Component
struct Index {
  @State message: string = '欢迎来到首页'

  build() {
    Column() {
      Text(this.message)
        .fontSize(22)
        .fontColor(Color.Black)
        .margin(20)

      Button('跳转到详情页')
        .margin({ top: 20 })
        .onClick(() => {
          router.pushUrl({ url: 'pages/Detail' })
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

Detail.ets

@Component
struct Detail {
  build() {
    Column() {
      Text('这里是详情页')
        .fontSize(22)
        .fontColor(Color.Black)
        .margin(20)

      Button('返回首页')
        .margin({ top: 20 })
        .onClick(() => {
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

app.json5 注册页面

{
  "pages": [
    "pages/Index",
    "pages/Detail"
  ],
  "mainPage": "pages/Index"
}

四、运行效果

1. 启动应用显示首页文字与按钮：

   欢迎来到首页
   [跳转到详情页]
   

2. 点击按钮跳转至详情页：

   这里是详情页
   [返回首页]
   

3. 点击返回按钮，回到首页。

五、常见易错点