BUZ-路由

Router -- 路由管理

Router是驱动页面渲染的核心组件，控制整个页面的流转和相关配置项的加载。

在项目开发中不会对Router进行频繁操作，一般开发人员只会关心Controller，此篇文章将对Router底层的配置 和高级用法进行介绍，有兴趣的童鞋可以深入了解下。

Router在Application（应用池）初始化时进行初始化，并挂载到App中，可以通过App进行相应的操作。

Router是通过HashChange进行视图渲染的，请保证浏览器HashChange是否支持。

驱动流程

可参考：教程/加载流程

在接下来的章节中你首先要对两个变量进行初步了解

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//当前路由地址 App.router.fragmentUrl;   /** 当前路由地址碎片 {           //碎片信息，例如{area:"home",controller:"index",action:""}     params: {},     //当前匹配的路由表信息     routerMap: undefined } */ App.router.fragment;

事件列表

监听事件

调用方式

1	App.router.trigger("eventName",params);

事件名称	作用	参数	备注
reload	重新渲染当前地址

广播事件

调用方式

1	App.router.on("eventName",function(e,param){});

事件名称	作用	参数	备注
before	路由变化时触发的第一个参数	{ newFragment: fragment, newFragmentUrl: hash, oldFragment: fragment, oldFragmentUrl: fragmentUrl }	在广播触发事件时，若返回false则中断路由流程，触发break事件。
continue	继续执行路由awit之后的逻辑		此事件模块配置文件中设置awit=true时，会终止接下来的加载流程，直到 触发continue才会执行，一般适用于等待全局请求结束后再去渲染，例如请求菜单接口。
after	路由整体流程执行完毕后触发	fragment
break	当路由加载时被中断时触发		1.在before事件中主动中断（return false） 2.文件加载失败时
before:initArea	初始化模块配置文件之前触发
after:initArea	初始化模块配置文件之后触发

公开方法

addRouterMap-添加路由映射处理方法

1 2 3 4 5 6 7 8

App.router.addRouterMap({     /**路由规则*/     role: "",     /**执行规则*/     exec: undefined,     /**地址*/     path: {} });

role-路由匹配规则

Router在初始化时会默认向路由映射表中注入默认匹配表。

1 2 3 4 5 6 7 8 9

//例子1 App.router.addRouterMap({     role: "{area}/{controller}/{action}" });   //例子2 App.router.addRouterMap({     role: "{area}/{controller}/{action}/{id}" });

通过上面的例子2，我们就可以在控制器中拿到id参数，并做相应的处理。

当地址发生改变时优先按照路由表录入顺序依次进行匹配，直到找到全部匹配成功的路由表，并返回当前路由表信息作为接下来页面渲染驱动逻辑。 在配置整个项目的路由映射逻辑时，务必注意路由映射顺序。建议：特殊规则>通用规则

exec自定义路由参数解析方法

通过此方法可以为指定的路由表进行参数转换，例如下面的例子。

1 2 3 4 5 6

App.router.addRouterMap({     role: "Home/{controller}/{action}",     exec:function(roleParam){         roleParam.params.area="DemoHome";     } });

通过上面这个例子可以看出，当我们访问Home/xxx/xxx地址时，其实是访问的DemoHome区域下面的文件。

path地址转换方法

目前提供area、router、layout文件的自定义方法

1 2 3 4 5 6 7 8 9 10 11 12 13

App.router.addRouterMap({     role: "Home/{controller}/{action}",     exec:function(roleParam){         roleParam.params.area="DemoHome";     },     path:{         area:"DemoHome/config",         router:function(fragment){             return "DemoHome/Demo/router"         },         layout:"commonWeb/layout/demoLayout"     } });

area默认值：areas/${fragment.params.area || ""}/config

router默认值：areas/${this.fragment.params.area}/${this.fragment.params.controller}/router

layout默认值：commonWeb/layouts/${areaConfig.layout || ""}

removeRouterMap 移除路由映射处理方法

1	App.router.removeRouterMap("Home/{controller}/{action}");

 

https://github.com/ZhangChuanHui/BUZ