#鸿蒙通关秘籍#如何在HarmonyOS中实现页面结构的迁移从Router到Navigation？

在HarmonyOS中从Router迁移到Navigation的过程中，需要重新定义页面的结构。Router的页面是通过@Entry修饰的Component，每个页面在main_page.json中声明。而基于Navigation的结构将页面分为导航页（Navbar）和子页（NavDestination）。以下是迁移页面的步骤：

1. 定义导航页：

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pathStack) {
      Column() {
        Button('Push PageOne', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pathStack.pushPathByName('pageOne', null)
          })
      }.width('100%').height('100%')
    }
    .title("Navigation")
  }
}

2. 定义子页：

@Builder
export function PageOneBuilder() {
  PageOne()
}

@Component
export struct PageOne {
  pathStack: NavPathStack = new NavPathStack()

  build() {
    NavDestination() {
      Column() {
        Button('回到首页', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pathStack.clear()
          })
      }.width('100%').height('100%')
    }.title('PageOne')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack
    })
  }
}