Backbone pushState 每次都会请求服务端？

在backbone中使用

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

可以在url中不使用#了，但每点一次a标签都会重新向服务器端发出请求（刷页面），这样不是没有意义了？

还是我什么地方没有设置对？

========================

后来我尝试阻断a链接的事件，然后使用

Backbone.history.navigate();

方法

拿到需要自己这样手动处理，还是backbone的a标签有什么特殊的写法我不知道？

首先检查你的浏览器是否支持pushState，如果不支持，可以在start中添加参数：hashChange: false
另外，确认一下你的页面是否是根目录"/"，如果不是，则必须加上你的页面的根目录参数:root: "/your/page/root"

====================================================
更新
这儿简要的介绍一下Backbone的router和history的使用方法。

首先定义一个App需要的router，例如：

javascriptvar AppRouter = Backbone.Router.extend({  
    routes : {  
        'books' : 'renderBooks',  
        'books/:id' : 'renderBook', 
    },   

    function renderBooks() {
        //...
    }

    function renderBook(id) {
        //...
    }
});

其次，启动history：

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

这里如果页面所在的目录不是根目录，则需要添加root参数。

然后我们就可以用router来控制URL状态了：

javascriptvar router = new AppRouter();
router.navigate('books/123', true);

这很有用，然而并不是所有的状态变化都是我们通过代码来修改router的状态，更多的是可能交给用户去“导航”，比如<a>标签。然而不幸的是，Backbone并没有对<a>标签做任何的定制，也就是说如果不做任何处理的话，<a>标签的点击事件还是会触发浏览器向服务器发起HTTP请求的，这并不是我们想要的。

因此，我们应该做的是阻断a标签的click事件，在事件里面阻止a标签的默认行为，修改为我们的router.navigate行为。例如：

javascript$(document).on('click', 'a', function(e) {
    var href = $(this).prop('href');
    href = href.slice(...) // 去掉root部分
    router.navigate(href, true);
}

如果我们并不想这样处理所有的<a>标签，比如仍保留某些向服务器发送HTTP请求的功能。这可以通过有条件的选择，一个好的方式是把所有不期望向服务器发送请求的<a>标签的href都以'#'开头，否则则认为向服务器发送请求。此时阻断代码可以写成如下的样子：

javascript$(document).on('click', 'a[href*="#"]', function(e) {
    var href = $(this).prop('href');
    href = href.slice(...) // 去掉root部分
    router.navigate(href, true);
}

最后一个问题：当这一切都设置好后，页面上的<a>标签也都按照预期的工作，当点击一个<a href='#books/123'>books 123</a>的标签后，浏览器的地址栏应该变成如下的样子，且不会向服务器发送请求：

http://localhost/books/123

此时，如果按一下浏览器的F5键去刷新网页，浏览器还是会向服务器发送请求，如果服务器没做任何处理，通常会返回404的。此时，就不是Backbone的范畴了，这就需要配置Web服务器，使服务器具有下列行为：

服务器接收任何以root开头的url，但忽略root之后的部分，因为那部分要交给客户端的Backbone来处理
服务器把root对应的HTTP响应交给客户端浏览器

客户端浏览器在收到服务器的响应后，启动Backbone，检查路由，并处理root后面的url部分，这就是前面说的router.navigate代码了。

【热门文章】