学习目标：

掌握页面跳转

学习内容：

跳转页面

创建页面：

在“project”窗口。打开“entry>src>main>ets”,右击“pages”，选择“New>ArkTS File”,命名“Second”，点击回车键。

在页面的路由，project窗口，打开“entry>src>main>resources”>base>profile,在main_pages.json的src中配置页面路由

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

实现页面间的跳转

2.1页面间的导航可以通过页面路由router来实现。
第一个

  // 跳转按钮绑定onClick事件，点击时跳转到第二页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')

          }).catch((err: BusinessError) => {
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })

报错的原因是没有导包，莫慌
在红线，用鼠标指向，会弹出这个框框，在点击add，包就导入了。


第二个页面就可以了

import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@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(`Succeeded in clicking the 'Back' button.`)
          try {
            // 返回第一页
            router.back()
            console.info('Succeeded in returning to the first page.')
          } catch (err) {
            let code = (err as BusinessError).code;
            let message = (err as BusinessError).message;
            console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

->

2.2如果需要实现更好的转场动效，推荐使用Navigation
这个我明天在摸索一下
---