一、页面跳转实现过程

1、通过pushPathByName等路由接口进行页面跳转。

        (注意：此时Navigation中可以不用配置navDestination属性。)

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

    build() {
      Navigation(this.pageStack){
      }.onAppear(() => {
        this.pageStack.pushPathByName("PageOne", null, false);
      })
      .hideNavBar(true)
    }
  }

2、在跳转目标页面中配置入口Builder函数

  // 跳转页面入口函数
  @Builder
  export function PageOneBuilder() {
    PageOne();
  }

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

    build() {
      NavDestination() {
      }
      .title('PageOne')
      .onReady((context: NavDestinationContext) => {
         this.pathStack = context.pathStack;
      })
    }
  }

3、创建路由表

在【src/main/resources/base/profile】中创建【router_map.json】这个json文件

可以添加如下信息，函数名称需要和跳转目标页面中Builder函数文件中的buildFunction保持一致，否则在编译时会报错。

  {
    "routerMap": [
      {
        "name": "PageOne",
        "pageSourceFile": "src/main/ets/pages/PageOne.ets",
        "buildFunction": "PageOneBuilder",
        "data": {
          "description" : "this is PageOne"
        }
      }
    ]
  }

配置说明如下：

4、在模块的配置文件【src/main/module.json5】中添加路由表配置：

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

二、跳转相关接口

NavPathStack通过Push相关的接口（如pushPath、pushPathByName、pushDestination、pushDestinationByName）去实现页面跳转的功能，主要分为以下三类：

1、普通跳转，通过页面的name去跳转，并可以携带param。

this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" });
this.pageStack.pushPathByName("PageOne", "PageOne Param");

2、带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。

this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
  console.info('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result));
});

3、带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。

this.pageStack.pushDestination({name: "PageOne", param: "PageOne Param"})
  .catch((error: BusinessError) => {
    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
  }).then(() => {
    console.info('Push destination succeed.');
  });
this.pageStack.pushDestinationByName("PageOne", "PageOne Param")
  .catch((error: BusinessError) => {
    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
  }).then(() => {
    console.info('Push destination succeed.');
  });

三、跳转相关参数获取

1、onReady

NavDestination子页第一次创建时会触发onReady回调，可以获取此页面对应的参数。

@Component
struct Page01 {
pathStack: NavPathStack | undefined = undefined;
pageParam: string = '';

build() {
NavDestination() {
// ...
}.title('Page01')
.onReady((context: NavDestinationContext) => {
this.pathStack = context.pathStack;
this.pageParam = context.pathInfo.param as string;
})
}
}

2、onResult

NavDestination组件中可以通过设置onResult接口，接收返回时传递的路由参数。

class NavParam {
desc: string = 'navigation-param'
}

@Component
struct DemoNavDestination {
// ...
build() {
NavDestination() {
// ...
}
.onResult((param: Object) => {
if (param instanceof NavParam) {
console.info('TestTag', 'get NavParam, its desc: ' + (param as NavParam).desc);
return;
}
console.info('TestTag', 'param not instance of NavParam');
})
}
}