mobile-router.js- 轻量级web端单页面框架

mobile-router.js- 轻量级web端单页面框架

mobile-router.js 是轻量级web端单页面框架。

[](https://github.com/mobile-router/mobile-router.js/blob/master/README-

zh_CN.md#优势)优势：

使用简单、方便、轻量，基于 history、window.onpopstate。支持路由视图嵌套 (1.5.0+)。无依赖，可与其他框架（库）搭配自由使用，例如：jquery, zepto, iscroll等。任意选择字符串式模板引擎，当然最简单的就是自己拼接字符串了；同时支持异步（远程获取模板，或者去请求数据在前端构建模板）；可配置是否缓存结果模板。考虑后端渲染首屏的情况，只需要按结构输出响应的片段即可，利于SEO，且可以实现前后端模板公用。自动缓存部分画面，可配置缓存数量，默认3个。每个路由都有对应的callback和onDestroy等配置方法，分别用于显示了对应画面后的回调以及当该画面销毁时回调。利用CSS animation控制动画转场（页面切换）效果，也可设置关闭动画效果。“保留”浏览器原生hash功能，根据hash，可自由跳转到对应id元素位置。可配置enablePushState决定是否使用pushstate功能，默认启用；不启用的话，仅仅影响的是不产生历史，但是路由依旧好使的，也就是还是基于url的。

[](https://github.com/mobile-router/mobile-router.js/blob/master/README-

zh_CN.md#一些注意点)一些注意点：

[](https://github.com/mobile-router/mobile-router.js/blob/master/README-

zh_CN.md#使用方法)使用方法：

M.router.init([    {        path: '/',        cacheTemplate: false, // 针对于当前的route，是否缓存模板 animation: true, // 针对于当前的route，是否有动画 aniClass: 'slideup', // 针对于当前的route，动画类型（效果） getTemplate: function() { return '/index';        }, onActive: function() { // 1.5.5+ 当路由被激活时调用，一般此时还没创建 `page-view` 元素 }, callback: function() { // 页面展示出来之后 if (this.cached) return; // 处理操作... }, onDestroy: function() { // 例如，处理一些解绑操作，销毁和DOM关联 }, onEnter: function(paramName) { // 1.5.3+ // 页面将要显示的时候 }, onLeave: function() { // 1.5.3+ // // 页面将要隐藏的时候 }    },    { // 支持 redirectTo 语法，可以是直接的 url 还可以是函数 (1.5.5+) path: '/redirectTo/:rtPath',        redirectPushState: false, // 默认 true, 当激活redirectTo的时候是否启用`pushState` redirectTo: function(rtPath) { console.log('redirectTo', arguments, this); return '/' + rtPath;        }    },    { // support redirectTo , string url or function (1.5.5+) // 如果当前的route配置有getTemplate的话，此时会表现的像正常的 // route一样依旧会创建`page-view`、会调用回调函数们、会做动画等。 // 当正常行为结束之后（route的callback被调用之后）会触发redirectTo的逻辑 path: '/contacts',        getTemplate: contacts.getTemplate,        onEnter: contacts.onEnter,        onLeave: contacts.onLeave,        callback: contacts.controller,        onDestroy: contacts.onDestroy,        redirectTo: '/contacts/list',        redirectPushState: false,        children: { // Nested routes & views! (1.5.0+) viewsSelector: '.content',            cacheViewsNum: 1,            routes: [                { // all contacts path: '/list',                    getTemplate: list.getTemplate,                    onEnter: list.onEnter,                    onLeave: list.onLeave,                    callback: list.controller,                    onDestroy: list.onDestroy }            ]        }    },    {        path: '/m/:paramName',        cacheTemplate: false, // 针对于当前的route，是否缓存模板 getTemplate: function(cb) { // 这里模拟异步得到模板内容 var that = this; // that.params 参数信息 // that.query query信息 setTimeout(function() { cb('/m/' + that.params.paramName);            }, 200);        }, callback: function(paramName) { if (this.cached) return; // 处理操作... }, onDestroy: function() { // 例如，处理一些解绑操作，销毁和DOM关联 }    },    { // 嵌套！！(1.5.0+) path: '/b/:bid', getTemplate: function(cb) { var path = this.path.substr(1); setTimeout(function() { var lis = ''; var t; for (var i = 1; i <= 4; i++) {                    t = path + '/s' + i;                    lis += '