blear.classes.router

1Introduction
2Example
3Static
- 3.1.defaults
4new Router(options)
5Prototype
6Route
- 6.1Static
- 6.2Prototype
7Events
8Dependencies
9Reference

1Introduction

description：前端路由类
author：ydr.me
create：2016-05-19 18:18
update：2018年03月23日16:54:20
github：https://github.com/blearjs/blear.classes.router

2Example

var Router = require('blear.classes.router');

var router = new Router();

3Static

静态属性、方法

3.1`.defaults`

3.1.1`.defaults.ignoreCase`

类型：Boolean
说明：是否忽略大小写，参考 blear.utils.url .matchPath
默认：false

3.1.2`.defaults.strict`

类型：Boolean
说明：是否验证模式，参考 blear.utils.url .matchPath
默认：false

3.1.3`.defaults.split`

类型：String
说明：分隔符，如果为 "!"，则 hash 就转换为 #!hash
默认：空

3.1.4`.defaults.mode`

类型：String
说明：路由模式，可以是hash或path
默认："hash"

4`new Router(options)`

实例化一个前端路由，options 默认为为 defaults。

5Prototype

5.1`#match([path], loader:route(next([to]))): router`

中间件路由，只在产生新的历史记录是触发，用户返回到历史记录不会触发。

场景1：用户在进入所有新页面之前，都进行用户信息查询

router.match(function (next) {
  var route = this;

  ajaxUserInfo(function () {
      next();
  });
});

场景2：用户在进入发布文章页面之前，判断是否有该权限

router.match('/publish/article', function () {
    queryUserPermission(function (can) {
        if (can) {
            return next();
        }

        next('/permission-denied');
    });
});

场景3：用户在进入所有文章页面之前，判断用户是否有该权限

 router.match('/article/**', function (next) {
     queryUserPermission(function (can) {
         if (can) {
             return next();
         }

         next('/permission-denied');
     });
 });

场景4：菜单高亮，将 /user前缀的路径标记为user，将/article前缀标记为article，然后在页面打开之后根据标记值对不同的菜单进行高亮

router
    .match({
        path: '/user/**',
        meta: {
            type: 'user'
        }
    }, function (next) {
        next();
    })
    .match({
        path: '/article/**',
        meta: {
            type: 'article'
        }
    }, function (next) {
        next();
    })
    .on('afterChange', function (route) {
        activeMenu(route.meta.type);
    });

5.1.1`this`

详细参考下文的 Route 类。

5.1.2`path`

类型：String | RegExp | {{path: String | RegExp, meta: Object}}
说明：路径

路径规则

规则1：空，表示进入所有新页面之前都必须经过该匹配

router.match(function (next) {
  // this.path === undefined;
  // 访问：/abc/def
  // this.href === '/abc/def';

  // 访问：/abc/123
  // this.href === '/abc/123';
});

规则2：静态路径

router.match('/abc/def', function (next) {
  // this.path === '/abc/def';
  // this.href === '/abc/def';
});

规则3：参数路径，使用:表示路径参数部分，参数会放置在params属性上

router.match('/abc/:def', function (next) {
  // this.path === '/abc/:def';

  // 访问：/abc/123
  // this.href === '/abc/123';
  // 则 this.params.def === '123';

  // 访问：/abc/456
  // this.href === '/abc/456';
  // 则 this.params.def === '456';
});

用*表示一级路径，用**表示多级（即1级及以上）路径

router.match('/abc/*', function (next) {
  // this.path === '/abc/:def';

  // 访问：/abc/123
  // this.href === '/abc/123';

  // 访问：/abc/456
  // this.href === '/abc/456';
});
router.match('/abc/**', function (next) {
  // this.path === '/abc/:def';

  // 访问：/abc/123
  // this.href === '/abc/123';

  // 访问：/abc/123/456
  // this.href === '/abc/123/456';

  // 访问：/abc/123/456/789
  // this.href === '/abc/123/456/789';
});

规则4：正则路径，分组匹配结果会放置在params属性上

router.match(/^\/abc\/([^/]+)$/, function (next) {
  // this.path === /^\/abc\/[^/]+$/;

  // 访问：/abc/123
  // this.href === '/abc/123';
  // 则 this.params[1] === '123';

  // 访问：/abc/456
  // this.href === '/abc/456';
  // 则 this.params[1] === '456';
});

规则4：对象描述，path属性遵循规则1、2、3、4，meta属性必须是一个对象

router
    .match({
        meta: {
            a: 1,
            b: 2
        }
    }, function (next) {
        next();
    })
    .match({
        path: '/abc/**',
        meta: {
            b: 3,
            c: 4
        }
    }, function (next) {
        // 访问：/abc/123
        // this.meta.a === 1;
        // this.meta.b === 3;
        // this.meta.c === 4;
        next();
    })
    .match({
        path: '/def/**',
        meta: {
            b: 5,
            c: 6
        }
    }, function (next) {
        // 访问：/def/456
        // this.meta.a === 1;
        // this.meta.b === 5;
        // this.meta.c === 6;
        next();
    });

5.1.3`loader`

类型：function
说明：中间件加载器

5.1.4`loader: this`

类型：Route
说明：小路由对象

5.1.5`loader: next`

类型：Function
说明：处理后的回调

5.1.6`loader: next: to`

类型：String
说明：如果需要跳转到其他 url，则需要传值，否则为空
默认：undefined

5.2`#get([path], loader(next)): router`

终点路由。即使后面有匹配的 match 也不会被执行，注意书写顺序。

5.2.1`path`

类型：String | RegExp | {{path: String | RegExp, meta: Object}}
说明：路由规则，参考match，为空则为处理未匹配情况

router.get('/abc/123', loader);
router.get('/abc/:def', loader);
router.get(/^\/abc\/([^/]+)$', loader);
router.get({path: '/abc/123', meta: {a: 1}}, loader);

// 404 处理
router.get(loader);

5.2.2`loader`

类型：Function
说明：路由控制器加载器

5.2.3`loader: next`

类型：Function
说明：控制器回调

router.get('/', function (next) {
    require.async('./pages/home/index.js', next);
});

router.get(function (next) {
    require.async('./pages/404/index.js', next);
});

如果需要完整的单页面应用实现，则必须搭配 blear.classes.controller（单页应用控制器类）和 blear.ui.application（单页应用 UI 实现）一起使用。

5.3`#start(): router`

启动路由监听。

6Route

导航类。每一次历史记录编号都会生成一个唯一的 Route 实例。

6.1Static

6.1.1`.href`

类型：String
说明：匹配的路径

6.1.2`.location`

类型：String
说明：当前浏览器地址

6.1.3`.meta`

类型：Object
说明：元信息

6.1.4`.params`

类型：Object | Array
说明：参数

6.1.5`.path`

类型：String
说明：路径，配置的路径规则

6.1.6`.pathname`

类型：String
说明：路径

6.1.7`.query`

类型：Object
说明：url 查询对象

6.1.8`.querystring`

类型：string
说明：url 查询字符串

6.1.9`.state`

类型：Object
说明：状态（自动处理）

6.2Prototype

6.2.1`.match(path): matches`

类型：Function
说明：以当前的路径进行匹配规则

6.2.1.1`path`

类型：String | RegExp
说明：路径规则

6.2.1.2`matches`

类型：Array | Object | null
说明：匹配结果

6.2.2`.redirect(to)`

跳转到目标地址，会生成新历史。

6.2.2.1`to`

类型：String
说明：目标地址

6.2.3`.removeQuery(key)`

删除查询参数，不会生成新历史。

6.2.3.1`key`

类型：String | Array
说明：删除一个或多个查询参数

6.2.4`.resolve(to): ret`

处理 url 合并关系。

// 当前 url 为 /path/to/a

route.reolve('./b')
// => "/path/to/b"

route.reolve('../b')
// => "/path/b"

6.2.5`to`

类型：String
说明：目标 url

6.2.6`ret`

类型：String
说明：处理后的 url

6.2.7`.rewrite(to)`

替换为目标地址，不会生成新历史。

6.2.8`to`

类型：String
说明：目标地址

6.2.9`.setQuery(key, [val])`

替换为目标地址，不会生成新历史。

6.2.10`key`

类型：String | Object
说明：键，或键值对

6.2.11`val`

类型：String | Array
说明：值

route.setQuery('a', 1);
route.setQuery('a', [1,2,3]);
route.setQuery({a: 1});
route.setQuery({a: 1, b: [3, 4]});

7Events

7.1`repeat(nav)`

重复点击同一个 url 时触发，不会触发路由事件。

7.2`nav`

类型：String
说明：导航信息对象

7.3`beforeLoad()`

所有加载器处理之前触发。此时可以显示页面加载的 loading，以示意等待开始。

7.4`afterLoad()`

所有加载器处理之后触发。此时可以隐藏页面加载的 loading，以示意等待结束。

7.5`beforeChange(route, prev)`

路由变化之前触发。

7.5.1`route`

类型：Route
说明：小路由对象

7.5.2`prev`

类型：Route
说明：前一个小路由对象

7.6`afterChange(route, prev)`

路由变化之后触发。

7.6.1`route`

类型：Route
说明：小路由对象

7.6.2`prev`

类型：Route
说明：前一个小路由对象

8Dependencies

9Reference

vue-router