路由

单页应用中页面不会跳转,而应用中不同的视图(页面)通常需要被链接、收藏或分享,所以需要记录视图的地址,SPA 提供基于 hash fragments 的 URL 路由控制,每个路由规则都绑定相应的页面视图,应用启动后将根据路由的变化自动转换视图。

路由匹配规则

jui spa 的路由匹配规则,遵循固定的约定,不需要实现配置路由表,直接通过 url 的 hash 部分根据固定的规则寻找视图。

为了更好的理解路由到视图的过程,我们假设有如下一个完整的hash路径:

  • 支持最多三级视图,由感叹号分隔。

  • 感叹号分隔开的路径组成了路径数组 path[],数组中的每一个元素都对应一个视图。

  • 视图寻址以全局配置的根视图目录(下图中的 viewsDir)为起点。

  • 路径起始部分有三组包含特殊意义的字符(串):'/', '$', '$/'

    • 如果字符不以三组中的任意一个打头,则代表是相对路径,需要逐级向上找父路径。

    • 如果路径不是最后一级路径,则最终确定的视图为路径文件夹下的 _layout 文件。

    • 如果最后一级路径未指定,即以 ! 结尾,最对应父路径目录下的 index 文件。

    • 如果路径以斜线 / 开头,则代表相对全局的根路径,不再继续向上找父路径。

    • 如果路径以斜线 $ 开头,则代表相对全局配置的映射路径,不再继续向上找父路径。

    • 如果路径以斜线 $/ 开头,则代表相对 web 站点的根路径,不再继续向上找父路径。

  • 超过三级路径的处理暂未定义。

路由切换规则

  • 访问单页应用的入口页面时,会监听浏览器 window 对象的 hashchange 事件。

  • 在上述 hashchange 事件中会触发 jui 定义的事件总线事件 hashChange。

  • 视图对象会响应上述总线事件并根据情况触发新的事件。

路由对象

系统定义了一个路由对象来代表每一个路由,url 被解析后,相关信息可以通过路由对象来访问。通过路由创建的视图对象会被注入路由对象做为属性,可在视图对象中通过 this.route 访问,并且当路由变换引起视图转换的时候,路由对象会被更新。

路由对象包含如下属性:

  • hash

    • 类型:String
    • 说明:url的hash值,例如:"#one!two!three?id=123" 。
  • path

    • 类型:String
    • 说明:hash值去掉#号,去掉查询字符串,例如:"one!two!three"
  • queryStr

    • 类型:String
    • 说明:完整 url 中的 hash 值部分里的查询字符串部分(问号 ? 后面的部分)。例如:"id=123"
  • query

    • 类型:Object
    • 说明:查询字符串键值对组成的json对象,方便程序访问查询字符串的值。例如 查询字符串 "id=123&category=1" 对应的 query 对象为 {id:123,category:1} ,这样就可以直接通过query.id来访问查询字符串id的值。
  • paths

    • 类型:Array
    • 说明:路径数组,path 经过感叹号分隔后得到的数组,例如:"one!two!three" 对应的 paths 为 ['one', 'two', 'three']。