HarmonyOS：NavPathStack的详细使用说明以及示例

鸿蒙推荐：从API Version 10开始，推荐使用NavPathStack实现页面路由，我们先看官方详细介绍：
Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。
怎么使用呢？官方写的很简单，就举了例子，我在尝试之后，发现跳转的页面不显示自己的UI，很纳闷，控制台的报错是没有找到对应的路由，错误信息：Builder function not registered.
仔细看了文档，才发现官方太省事了，没有整合好，我就按照正常的配置+跳转，梳理一下，你在调试的时候就可以正常使用NavPathStack来做路由的跳转。
正文开始：
1.配置子页也需要配置到系统配置文件route_map.json，现在系统没有给我们配置这个文件，在/respurces/base/profile,目录下新建文件如图所示

WechatIMG220.png

这个是配置navigation的子页面路由，如何不配置就会报上述错误信息
2.配置module.json5信息，这个文件配置route_map.json路径的

WechatIMG221.png

3.页面跳转的方法示例
主页面：

//index.ets
@Entry
@Component
struct Index {
  // 创建一个页面栈对象并传入Navigation
  pageStack: NavPathStack = new NavPathStack()
  build() {
    Navigation(this.pageStack) {
    Button("跳转")
      .onClick(() =>{
        console.info("nav跳转事件"); 
            //方法1 普通跳转，通过页面的name去跳转，并可以携带param。
             this.pageStack.pushPathByName('NavWidgetTwo', 'pageStack上一页面传递过来的参数数',true)
            //方法2 普通跳转，通过页面的name去跳转，并可以携带param。
             this.pageStack.pushPath({ name: "NavWidgetTwo", param: "pageStack上一页面传递过来的参数数"})
            //方法3，同方法1，我试过pop的时候没有打印，不知道官方的怎么有打印
            this.pageStack.pushPathByName('NavWidgetTwo', "pageStack上一页面传递过来的参数数", (popInfo) => {
              console.log('------>Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
            });
            //方法4 错误码的跳转，跳转结束会触发异步回调，返回错误码信息。
            this.pageStack.pushDestinationByName('NavWidgetTwo', "PageOne Param")
              .catch((error: BusinessError) => {
                console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
              }).then(() => {
              console.error('Push destination succeed.');
            });
        }
    .title('Main')
  }
}

子页面的示例代码
//NavWidgetTwo.ets

@Builder
export function NavWidgetTwoBuilder() {
  NavWidgetTwo()
}
// @Entry
@Component
export struct NavWidgetTwo {
  @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()
  @Builder
  PagesMap(name: string) {
    if (name == 'DialogPage') {
      DialogPage()
    }
  }
  build() {
    NavDestination() {
      Column() {
        Button('回到首页', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageStack.clear()
          })
        Button('Push DialogPage')
          .margin(20)
          .width('80%')
          .onClick(() => {
            this.pageStack.pushPathByName('PageOne', '');
          })
          //传递的参数取值方法
        Button(`${this.pageStack.getParamByName("NavWidgetTwo")}`)
          .margin(20)
          .width('80%')
          .onClick(() => {
            //返回上一页面
            this.pageStack.pop();
            // 返回到上一个PageOne页面
            this.pageStack.popToName("PageOne")
            // 返回到索引为1的页面
            this.pageStack.popToIndex(1)
            // 返回到根首页（清除栈中所有页面）
            this.pageStack.clear()
          })
      }.width('100%').height('100%')
    }.title('nav子页面')
    .onReady((context: NavDestinationContext) => {
      this.pageStack = context.pathStack
    })
  }
}

注意：子页面只能用NavDestination，不能和主页面一样用Navigation，我试过用Navigation显示不了UI，具体还需要探索原因