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

  build() {
    Navigation(this.pageStack) {
      Text("Hello")
        .onClick(() => {
          this.pageStack.pushPath({ name: "page2" })
        })
    }
    .mode(NavigationMode.Stack)
    .navDestination(PagesMap)
    .hideToolBar(true)
    .hideBackButton(true)
    .hideTitleBar(true)
    .hideNavBar(false)

  }
}

@Builder
function PagesMap(name: string, param: object): void {
  if (name == "page2") {
    Page2Builder()
  }
}


//Page2
@Builder
export function Page2Builder() {
  Page2()
}

@Entry
struct Page2 {
  build() {
    NavDestination() {
      Text("page2")
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: "pages/Page3" })
        })
    }
    .width('100%')
    .height('100%')
    .hideTitleBar(true)
    .hideToolBar(true)
    .hideBackButton(true)
  }
}

PagesMap需要添加 @Builder注解，否则跳转不报错，但显示的是空白界面。

Router

Router的跳转目的地必须是Page,而NavDestination是Navigation的子组件。Page使用@Entry、@Component进行注解，并在resources\base\profile\main_page.json 中进行注册

@Entry
@Component
struct Page4 {
  build() {
    Text("page4")
      .id('Page3HelloWorld')
      .fontSize($r('app.float.page_text_font_size'))
      .fontWeight(FontWeight.Bold)
      .backgroundColor("red")
      .height('100%')
      .width('100%')
  }
}

//main_page.json
{
  "src": [
    "pages/Index",
    "pages/Page3",
    "pages/Page4"
  ]
}