鸿蒙应用开发

利用页面路由router实现页面跳转

1.第一个页面设置简单样式' router.Page.ets '

在build里面创建简单样式利用布局组件，和文字、按钮组件，创建出第一个页面样式，代码如下：

 build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
   }
      .width('100%')
    }
    .height('100%')
  }

 效果如下：

 2.设置第二个页面样式‘ SecondPage.ets’

代码如下：

 build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
 }
      .width('100%')
    }
    .height('100%')
  }

 效果图如下：

 3.设置页面点击onclick事件，利用router实现页面跳转

.onClick(() => {
          console.log(`成功点击跳转按钮`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/SecondPage' }).then(() => {
            console.log('成功跳转second page')
          }).catch((err) => {
            console.error(`跳转失败`)
          })
        })

4.设置第二个页面点击onclick事件

 .onClick(() => {
          console.info(`成功点击返回按钮`)
          try {
            // 返回第一页
            router.back()
            console.info('成功返回routerPage.ets')
          } catch (err) {
            console.error(`返回失败`)
          }
        })

 5.综合代码

第一个页面' router.Page.ets '，第二个页面‘ SecondPage.ets’我们在页面头部需要导入路由模版

第一个页面' router.Page.ets '里面综合代码如下：

// Index.ets
// 导入页面路由模块
import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，点击时跳转到第二页
        .onClick(() => {
          console.log(`成功点击跳转按钮`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/SecondPage' }).then(() => {
            console.log('成功跳转second page')
          }).catch((err) => {
            console.error(`跳转失败`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

 第二个页面‘ SecondPage.ets’综合代码如下：

// Second.ets
// 导入页面路由模块
import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 返回按钮绑定onClick事件，点击按钮时返回到第一页
        .onClick(() => {
          console.info(`成功点击返回按钮`)
          try {
            // 返回第一页
            router.back()
            console.info('成功返回routerPage.ets')
          } catch (err) {
            console.error(`返回失败`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}