Navigation系统路由表的使用

各位小伙伴最近发现很多公司要抛弃router使用Navigation举行路由管理了
我们可以从官方文档看一下两者的差别
架构差别

从ArkUI组件树层级上来看，原先由Router管理的page在页面栈管理节点stage的下面。Navigation作为导航容器组件，可以挂载在单个page节点下，也可以叠加、嵌套。Navigation管理了标题栏、内容区和工具栏，内容区用于体现用户自定义页面的内容，并支持页面的路由本领。Navigation的这种计划上有如下上风：

• 接口上显式区分标题栏、内容区和工具栏，实现更加灵活的管理和UX动效本领；
  
• 显式提供路由容器概念，由开辟者决定路由容器的位置，支持在全模态、半模态、弹窗中体现；
  
• 整合UX计划和一多本领，默认提供统一的标题体现、页面切换和单双栏适配本领；
  
• 基于通用UIBuilder本领，由开辟者决定页面别名和页面UI对应关系，提供更加灵活的页面设置本领；
  
• 基于组件属性动效和共享元素动效本领，将页面切换动效转换为组件属性动效实现，提供更加丰富和灵活的切换动效；
  
• 开放了页面栈对象，开辟者可以继续，能更好的管理页面体现。
  

本领对标

业务场景NavigationRouter一多本领支持，Auto模式自适应单栏跟双栏体现不支持跳转指定页面pushPath & pushDestinationpushUrl & pushNameRoute跳转HSP中页面支持支持跳转HAR中页面支持支持跳转传参支持支持获取指定页面参数支持不支持传参范例传参为对象形式传参为对象形式，对象中暂不支持方法变量跳转结果回调支持支持跳转单例页面支持支持页面返回支持支持页面返回传参支持支持返回指定路由支持支持页面返回弹窗支持，通过路由拦截实现showAlertBeforeBackPage路由替换replacePath & replacePathByNamereplaceUrl & replaceNameRoute路由栈清理clearclear清理指定路由removeByIndexes & removeByName不支持转场动画支持支持自定义转场动画支持支持，动画范例受限屏蔽转场动画支持全局和单次支持 设置pageTransition方法duration为0geometryTransition共享元素动画支持（NavDestination之间共享）不支持页面生命周期监听UIObserver.on('navDestinationUpdate')UIObserver.on('routerPageUpdate')获取页面栈对象支持不支持路由拦截支持通过setInercption做路由拦截不支持路由栈信息查询支持getState() & getLength()路由栈move操纵moveToTop & moveIndexToTop不支持沉醉式页面支持不支持，需通过window设置设置页面标题栏（titlebar）和工具栏（toolbar）支持不支持模态嵌套路由支持不支持
看到这里面小伙伴们可以看出来Navigation要好出router太多了
以是本日开端交大家怎么使用Navigation的系统路由表！
系统路由表

从API version 12开始，Navigation支持使用系统路由表的方式进举措态路由。各业务模块（HSP/HAR）中需要独立设置router_map.json文件，在触发路由跳转时，应用只需要通过NavPathStack提供的路由方法，传入需要路由的页面设置名称，此时系统会自动完成路由模块的动态加载、页面组件构建，并完成路由跳转，从而实现了开辟层面的模块解耦。其紧张步骤如下： 
1.在跳转目标模块的module.json添加路由表的设置 （就是A跳到B 我们需要在B模块举行设置）

1.   {
2.     "module" : {
3.       "routerMap": "$profile:route_map"
4.     }
5.   }

复制代码

2.在跳转目标模块的 resource/base/profile 里面新建一个routr_map.json文件,里面要设置的是跳转页面的信息

1.   {
2.     "routerMap": [
3.       {
4.         "name": "PageOne",
5.         "pageSourceFile": "src/main/ets/pages/PageOne.ets",
6.         "buildFunction": "PageOneBuilder",
7.         "data": {
8.           "description" : "this is PageOne"
9.         }
10.       }
11.     ]
12.   }

复制代码

设置说明如下：
设置项说明name跳转页面名称。pageSourceFile跳转目标页在包内的路径，相对src目录的相对路径。buildFunction跳转目标页的入口函数名称，必须以@Builder修饰。data应用自定义字段。可以通过设置项读取接口getConfigInRouteMap获取。 3.在跳转目标页面中，需要设置入口Builder函数，函数名称需要和router_map.json设置文件中的buildFunction保持一致，否则在编译时会报错。

1. //这个页面是跳转页面的配置
3. // 跳转页面入口函数
4.   @Builder
5.   export function PageOneBuilder() {
6.     PageOne()
7.   }
9.   @Component
10.   struct PageOne {
12.     build() {
13.       //这个是Navigation的子组件 必须要写
14.       NavDestination() {
15.       }
16.       .title('PageOne')
17.     }
18.   }

复制代码

4.通过pushPathByName等路由接口举行页面跳转。(注意：此时Navigation中可以不消设置navDestination属性)

1. //Navigation的主界面，我们需要从这一层跳到目标的NavDestination
3. @Entry
4.   @Component
5.   struct Index {
6.     pageStack : NavPathStack = new NavPathStack();
7.       aboutToAppear(): void {
8.       // 创建路由  自己封装的类
9.     DynamicsRouter.createRouter(this.pageStack) }
11.     build() {
12.       Navigation(this.pageStack){
13.            Button('点击跳转到PageOne')
14.           .onclick(()=>{
15.             //这一行是我简单封装的一个类 接下来会讲
16.                 DynamicsRouter.push("PageOne", '', true)  
17.             })
18.       }
19.       .hideNavBar(true)
20.     }
21.   }

复制代码

5.给大家看一下封装的方法，在这之前讲一下为什么封装这个方法，因为在Beta1版本测试的时候har包不能push到har包里面 会体现navpathstack不存在，以是我们封装到类里面

1. /**
2. *
3. * 实现步骤：
4. * 1.将主模块的NavPathStack传入createRouter接口，注册路由
5. * 2.通过push接口，跳转到指定的模块页面
6. */
9. export class DynamicsRouter {
10.   static navPathStack: NavPathStack = new NavPathStack();
11.   // 注册router
12.   public static createRouter(router: NavPathStack): void {
13.     DynamicsRouter.navPathStack = router;
14.   }
15.   // 通过名称获取router
16.   public static getRouter(): NavPathStack | undefined {
17.     let router = DynamicsRouter.navPathStack;
18.     return router as NavPathStack;
19.   }
20.   /**
21.    * 通过获取页面栈跳转到指定页面
22.    */
23.   public static async push(name: string, param?: ESObject, animated: boolean = true): Promise<void> {
25.     DynamicsRouter.getRouter()?.pushPath({ name: name, param: param }, animated);
26.   }
27.   public static async replace(name: string, param: ESObject, animated: boolean = false): Promise<void> {
28.     // 查找到对应的路由栈进行跳转
29.     DynamicsRouter.getRouter()?.replacePathByName(name, param, animated);
30.   }
31.   //获取params  name要填目标模块的name
32.   public static async getParams(name: string): Promise<ESObject>{
33.     return DynamicsRouter.getRouter()?.getParamByName(name)
34.   }
35. //获取从Navigation传过来的params
36.   public static async getNavPararms():Promise<ESObject>{
37.     return DynamicsRouter.getRouter()?.getParamByIndex(0)
38.   }
41.   public static async getAllParams(): Promise<ESObject>{
42.     return DynamicsRouter.getRouter()?.getAllPathName();
43.   }
44.   //路由拦截
45.   public static async setInterception(){
46.     // return DynamicsRouter.getRouter()?.setInterception({willShow:()=>{}})
47.   }
49.   // 通过获取页面栈并pop
50.   public static pop(): void {
51.     // 查找到对应的路由栈进行pop
52.     DynamicsRouter.getRouter()?.pop();
53.   }
54. }

复制代码

这个就是Navigation系统路由表 简单的使用方法！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。