鸿蒙Navigation导航 , 模块内和跨模块路由跳转，动态路由

此文章内容兼容API12，使用harmony next应用开发
官方推荐使用 Navigation 替换Router，实现模块内外路由跳转

简述

简单模板使用

Navigation + NavPathStack + NavDestination + route_map.json
模块内
1，编写 NavigationPage 和 NavigationSonPage 页

@Entry
@Component
struct NavigationPage {
  build() {
    Navigation(NavTools.getInstance().getPageInfos()) {
      Button('Jump')
        .onClick(() => {
          NavTools.getInstance().getPageInfos().pushPathByName("PageNext", 3)
        })
    }
    .width('100%')
    .height('100%')
    .mode(NavigationMode.Stack)
  }
}
------------------------------------------------------------------------------
@Builder
export function NavigationSonPageBuilder(name: string, p: Object) {
  NavigationSonPage({params:p})
}
@Component
struct NavigationSonPage {
  @State params: object | undefined = undefined
  build() {
    NavDestination() {
      Column(){
        Text("HAHA && " + this.params)
        Button('BACK').margin(16).onClick(() => {
          NavTools.getInstance().getPageInfos().pop()
        })
      }
    }
  }
}

2，页面管理类

export default class NavTools {
  private static instance: NavTools;
  private pageInfos: NavPathStack = new NavPathStack()
  private constructor() {
  }
  public static getInstance(): NavTools {
    if (!NavTools.instance) {
      NavTools.instance = new NavTools();
    }
    return NavTools.instance;
  }
  getPageInfos() : NavPathStack{
    return this.pageInfos
  }
}

3，在resources/base/profile中创建route_map.json文件并添加如下配置信息

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

4，在模块下的module.json5配置文件，module标签中定义

    "routerMap": "$profile:route_map",

跨模块
和模块内一致，注意NavPathStack一定是同一个。 页面管理类 最好放在 support 下

详解

Navigation

Navigation 一般作为 @Entry 的根容器，便于控制页面路由切换 和 页面适配

1，模式

• NavigationMode.Auto ： 自适应模式，默认，页面宽度大于等于一定阈值时，Navigation组件采用分栏模式，反之采用单栏模式
• NavigationMode.Stack：单栏模式
• NavigationMode.Split ：分栏模式

NavPathStack

每个 Navigation 都对应一个 NavPathStack， 使用 NavPathStack 提供的方法，进行路由管理，包括：页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能

1，页面跳转：
普通跳转、

this.pageStack.pushPathByName("PageOne", "With Param")

带返回回调跳转，当页面出栈时返回信息

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

带错误码的跳转

this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {}).then(() => {});

2，页面返回

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

3，页面替换

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

4，页面删除

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

5，其他方法

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

6，路由拦截
可使用 setInterception 方法，设置 Navigation 页面跳转的拦截回调，实现路由重定向

NavDestination

NavDestination 是 Navigation 子页面的根容器。 可以设置独立的标题栏、菜单栏。
1，类型

• NavDestinationMode.STANDARD：默认类型
• NavDestinationMode.DIALOG：弹窗类型

2，生命周期

• 自定义组件生命周期： aboutToAppear和aboutToDisappear

• 通用生命周期：OnAppear和OnDisappear

• NavDestination特有生命周期：onWillAppear onWillShow onShown onWillHide onHidden onWillDisappear

NavDest生命周期

动态路由

1，静态路由：通过import方式，进行页面跳转
动态路由：解决多个模块间复用业务逻辑
2，系统路由表
各模块（HSP/HAR）中独立配置route_map.json文件，只需要通过NavPathStack提供的路由方法，传入需要路由的页面配置名称，此时系统会自动完成路由跳转
3，route_map.json
配置信息：

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