// 創(chuàng)建NavPathStack對象pageStack
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();

// 構建路由表pageMap
@Builder
PageMap(pageName: string) {
  if (pageName === 'loginPage') {
    loginPageView();
  } else if (pageName === 'mainPage') {
    mainPageView();
  }
}

// 在build中使用Navigation組件
Navigation(this.pageStack) {
  // ...
  Button('login').onClick(ent => {
    let pathInfo: NavPathInfo = new NavPathInfo('loginPage', null);
    this.pageStack.pushDestination(pathInfo, true);
  });
}.navDestination(this.pageMap);

// 發(fā)起頁傳遞參數(shù)
let loginParam: LoginParam = new LoginParam();
let pathInfo: NavPathInfo = new NavPathInfo('loginPage', loginParam, (popInfo: PopInfo) => {
  let loginParam: LoginParam = popInfo.info.param as LoginParam;
  // ...
});

this.pageStack.pushDestination(pathInfo, true);

// 目標頁面接收參數(shù)
build() {
  NavDestination() {
    // ...
  }.onReady(cxt => {
    this.loginParam = cxt.pathInfo.param as LoginParam;
    // ...
  });
}

// 導入模塊目標頁自定義組件
import { loginPageInHSP } from 'library/src/main/ets/pages/loginPageInHSP';

// 在pageMap中配置路由
@Builder pageMap(name: string) {
  if (name === 'loginPageInHSP') {
    loginPageInHSP();
  }
}

// 使用pushDestination進行跳轉(zhuǎn)
let pathInfo: NavPathInfo = new NavPathInfo('loginPageInHSP', loginParam, (popInfo: PopInfo) => {});
this.pageStack.pushDestination(pathInfo, true);

// 默認轉(zhuǎn)場動畫
this.pageStack.pushDestination(pathInfo, true);

// 自定義轉(zhuǎn)場動畫
Navigation(this.pageStack) {
  // ...
}.customNavContentTransition((from, to, operation) => {
  // 實現(xiàn)自定義動畫邏輯
});

// 起始頁為需要實現(xiàn)共享元素轉(zhuǎn)場的元素添加geometryTransition屬性
Column() {
  Image($r('app.media.startIcon'))
    .geometryTransition('1')
    .width(100)
    .height(100);
}

// 目的頁使用相同的id進行共享元素轉(zhuǎn)場
Column() {
  Image($r('app.media.startIcon'))
    .geometryTransition('1')
    .width(200)
    .height(200);
}

@Component
struct PrivacyDialog {
  // ...
  build() {
    NavDestination() {
      // ...
    }.mode(NavDestinationMode.DIALOG);
  }
}

uiObserver.on("navDestinationUpdate", (info) => {
  if (info.state == 0) {
    console.info('page ON_SHOWN:' + info.name.toString());
  } else if (info.state == 1) {
    console.info('page ON_HIDE' + info.name.toString());
  }
});

RouterManager.setInterception({
  willShow: (from, to, operation, animated) => {
    // 根據(jù)頁面跳轉(zhuǎn)邏輯實現(xiàn)彈窗確認邏輯
  },
  // ...
});

{
  "module": {
    // ...
    "routerMap": "$profile:router_map"
  }
}

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

  aboutToAppear(): void {
    RouterManager.createNavPathStack(this.pageStack);
    // ...
  }

  build() {
    Navigation(this.pageStack) {
      // ...
    }.hideNavBar(true);
  }
}

@Component
struct MainPage {
  // ...
}

@Builder
export function getMainPageRouterMap() {
  MainPage();
}