Question

直到最近，哈希片段（#page）才被用来提供这些永久链接，但随着历史API的到来，现在就是可以使用标准网址（/页面）。

我尝试添加此路由器规则：

routes: {
  'test': function() {
     alert('ok'); }
}

并致电Backbone.history.start({pushState: true, root: '/myroot/'})。我的页面中有一个链接：

<a href="test">test me</a>

我用以下内容拦截了链接的点击事件：

$('a[href=test]').click(function(e) {
  router.navigate('test');
  e.preventDefault(); });

当我点击链接时，没有发出请求，我认为拦截成功了。 但事件未触发。

所以，请帮助我了解这个History API的工作原理。或者指出我做错了。

Answer 1

您需要启用pushState：

Backbone.history.start({pushState: true});

您的链接将强制从您的服务器完全刷新，您的服务器必须使用该网址的内容进行回复。

您需要拦截该链接的点击并告诉您的路由器导航到“测试”路线：

myRouter.navigate("test");

有关HTML5历史记录API的更多信息：http://diveintohtml5.info/history.html

有关在Backbone中使用pushState的一些介绍级别信息：

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

我给出的演示视频涵盖了所有这些：

http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/

希望有所帮助。

Answer 2

您需要在导航调用中添加{trigger：true}以实际触发路由事件。

Answer 3

要表明您希望在应用中使用HTML5 pushState 支持，请使用Backbone.history.start({pushState: true})。如果您想使用 pushState ，但是不支持它的浏览器本身使用完整页面刷新，则可以向选项中添加{hashChange: false}。

PS！如果您的应用程序未从您域的根网址/提供，请务必告知历史记录根目录的确切位置，作为选项（否则导航不行！）：

Backbone.history.start({pushState: true, root: "/public/search/"})

如何在Backbone.Router中使用标准URL？

3 个答案: