Backbone 中的 Router 充当路由的作用，控制 URL 的走向，当在 URL 中使用 # 标签时生效。
定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL，而且我们需要记住，在 Backbone 中，# 标签后的任意字符都会被 Router 接收并解释。
下面我们来定义一个 Router：
<script>
var AppRouter = Backbone.Router.extend({
routes: {
"*actions": "defaultRoute" // 匹配 http://example.com/#anything-here
}
});
// 实例化 Router
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function(actions) {
alert(actions);
})
// 打开 Backbone 的历史记录
Backbone.history.start();
</script>
现在，我们就定义好了一个 Router 了，但此时 Router 并未匹配特定的 URL，接下来我们开始详细讲解 Router 是如何工作的。
动态路由选择
Backbone 允许你定义带有特定参数的 Router。例如，你可能希望通过一个特定的 id 接收一个 post，比如这样一个 URL："http://example.com/#/posts/12"，一旦这个 Router 被激活，你就可以取得一个 id 为12的 post。接下来，我们就来定义这个 Router：
<script>
var AppRouter = Backbone.Router.extend({
routes: {
"posts/:id": "getPost",
"*actions": "defaultRoute" //Backbone 会根据顺序匹配路由
}
});
// 实例化 Router
var app_router = new AppRouter;
app_router.on('route:getPost', function (id) {
// 注意，参数通过这里进行传递
alert( "Get post number " + id );
});
app_router.on('route:defaultRoute', function (actions) {
alert( actions );
});
// 打开 Backbone 的历史记录
Backbone.history.start();
</script>
匹配规则
Backbone 使用两种形式的变量来设置 Router 的匹配规则。第一种是 :，它可以匹配 URL 中斜杠之间的任意参数，另一种是 *，它用来匹配斜杠后面的所有部分。注意，由于第二种形式的模糊性大于第一种，所以它的匹配优先级最低。
任一形式匹配的结果会以参数的形式传递到相关的函数中，第一种规则可能返回一个或多个参数，第二种规则将整个匹配结果作为一个参数返回。
接下来，我们用实例来说明：
routes:{
"posts/:id": "getPost",
// <a href="http://example.com/#/posts/121">Example</a>
"download/*path": "downloadFile",
// <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
":route/:action": "loadView",
// <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
},
app_router.on('route:getPost', function( id ){
alert(id); // 匹配后，传递过来的参数为 12
});
app_router.on('route:downloadFile', function( path ){
alert(path); // 匹配后，整个匹配结果作为一个参数返回，路径为 user/images/hey.gif
});
app_router.on('route:loadView', function( route, action ){
alert(route + "_" + action); // 匹配后，传递过来两个参数，此时会弹出 dashboard_graph
});
你可能经常听说“路由器”这个词，但它常常是指一种网络设备，这种设备是网络连接、数据传输的导航和枢纽。而Backbone中的“路由器”功能与它类似，从上面的例子中你就能看出，它可以将不同的URL锚点导航到对应的Action方法。
（许多服务端Web框架中也提供了这样的机制，但Backbone.Router更侧重前端单页应用的导航。）
Backbone的路由导航是由Backbone.Router和Backbone.History两个类共同完成的：
- Router类用于定义和解析路由规则，并将URL映射到Action。
- History类用于监听URL的变化，和触发Action方法。
我们一般不会直接实例化一个History，因为我们在第一次创建Router实例时，会自动创建一个History的单例对象，你可以通过Backbone.history来访问这个对象。
要使用路由功能，首先我们需要定义一个Router类来声明需要监听的URL规则和Action，在刚才的例子中，我们在定义时通过routes属性来定义需要监听的URL列表，其中Key表示URL规则，Value表示当URL处于该规则时所执行的Action方法。
Hash规则
URL规则表示当前URL中的Hash（锚点）片段，我们除了能在规则中指定一般的字符串外，还需要注意两种特别的动态规则：
规则中以/（斜线）为分隔的一段字符串，在Router类内部会被转换为表达式([^\/]+)，表示以/（斜线）开头的多个字符，如果在这一段规则中设置了:（冒号），则表示URL中这一段字符串将被作为参数传递给Action。
例如我们设置了规则topic/:id，当锚点为#topic/1023时，1023将被作为参数id传递给Action，规则中的参数名（:id）一般会和Action方法的形参名称相同，虽然Router并没有这样的限制，但使用相同的参数名更容易让人理解。
规则中的*（星号）会在Router内部被转换为表达式(.*"htmlcode">
router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){
// todo
});
我们调用route()方法时，给定的规则不仅仅可以是字符串，也可以是一个正则表达式：
router.route(/^topic/(.*"htmlcode">
Router.navigate()方法进行控制，例如：
router.navigate('topic/1000', {
trigger: true
});
这段代码将URL更改为http://localhost/index.html#topic/1000，并触发了renderDetail方法。需要注意的是，我们在第二个参数传入了trigger配置，该配置用于表示更改URL的同时是否触发相应的Action方法。
3.stop()方法
还记得我们是通过Backbone.history.start()方法来启动路由监听的，你也可以随时调用Backbone.history.stop()方法来停止监听，例如：
router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) {
Backbone.history.stop();
});
运行这段代码，并访问URL：http://localhost/index.html#topic/5/20，你会发现这个Action被执行之后，监听已经不再生效了。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！