Router和History (路由控制)

Backbone.Router担任了一部分Controller（控制器）的工作，它一般运行在单页应用中，能将特定的URL或锚点规则绑定到一个指定的方法（后文中称Action）。

当我们开发一个单页应用时，常常会遇到这样两个问题：

我们在同一个页面中通过用户的操作来隐藏、显示HTML块，为用户提供一个无刷新、完整流畅的体验，但用户可能并不知道他当前正处于同一个页面中，因此他希望通过浏览器的“前进”和“后退”按钮来返回和前进到上一步操作。当他真正这样操作时，会离开当前页面，这显然不是用户所期望的。

另一个问题是用户在单页应用中操作，当他读到一篇好的文章，或看到一个中意的商品时，他可能会将URL收藏起来或分享给自己的好友。但当他下一次重新打开这个链接地址，看到的却是应用的初始化状态，而并不是当初那篇文章或那个商品。

Backbone.Router为我们提供了解决这两个问题的方法，我们先来看一个例子：

Js代码 收藏代码

var AppRouter = Backbone.Router.extend({          routes : {              '' : 'main',              'topic' : 'renderList',              'topic/:id' : 'renderDetail',              '*error' : 'renderError'          },          main : function() {              console.log('应用入口方法');          },          renderList : function() {              console.log('渲染列表方法');          },          renderDetail : function(id) {              console.log('渲染详情方法, id为: ' + id);          },          renderError : function(error) {              console.log('URL错误, 错误信息: ' + error);          }      });            var router = new AppRouter();      Backbone.history.start();  复制代码

将例子中的代码复制到你的页面中。假设你的页面地址为http://localhost/index.html，请依次访问下面的地址，并注意控制台的输出结果：

http://localhost/index.html // 输出：应用入口方法    http://localhost/index.html#topic // 输出：渲染列表方法    http://localhost/index.html#topic/1023 // 输出：渲染详情方法, id为:1023    http://localhost/index.html#about // 输出：URL错误, 错误信息: about复制代码

然后再使用浏览器的“前进”、“返回”等按钮进行切换，你会看到当你的URL切换时，控制台输出了对应的结果，说明它已经调用了相应的方法。而在进行这些操时，页面并没有刷新。这个例子很好地解决了我们在一开始所说的两个问题。