骨干路由器答案

【问题标题】：Backbone router骨干路由器
【发布时间】：2014-08-07 08:50:11
【问题描述】：

我正在尝试更新 URL，但在使用主干中的选项卡时不导航页面，以便可以为选项卡添加书签，当我从我的代码库运行它时，它什么也不做，

app.Router.navigate('groups/teams', { trigger:false });

但是，如果我在控制台中运行它，它会将 url 从“http://app.local/groups”更改为“http://app.local/groups#groups/teams”，为什么要添加#？我想将 URL 更新为“http://app.local/groups/teams”。

我是否错误地使用了路由器？我的路由器很简单，

        var app = app || {};

        var Router = Backbone.Router.extend({

        routes: {

            'groups' : 'groups'

        },

        groups: function() {
             alert("Groups");
        }

    });

    app.Router = new Router();

【问题讨论】：

你用{pushState:true, hashChange:false}开始了骨干历史吗？听起来您使用的浏览器不支持推送状态。
您有groups/teams 或groups/:something 的路线吗？

标签： javascript backbone.js backbone-routing

【解决方案1】：

通常当您有如下网址时：

www.example.com/foo

foo 部分被认为表示 example.com 服务器上名为“foo”的资源。因此，如果客户端（即 Javascript 代码）将用户重定向到“www.example.com/bar”，此后它将无法执行任何操作，因为浏览器会将用户带到新页面完全（使用全新的 Javascript 代码）。

大多数（但不是全部）现代浏览器都实现了一种称为 pushstate 的功能，它可以解决这个问题，并允许客户端将 URL 设置为“www.example.com/bar”，而无需实际让浏览器返回到服务器和要求该页面。但是，由于并非所有浏览器都支持 pushstate，Backbone 默认不使用它。

Backbone 反而利用了一种古老的网络技术：锚点/哈希（即 www.example.com/#foo）。如果您不想这样做，您必须在启动路由器时传递pushState: true, hashChange: false 选项。但是，即使您这样做，如果浏览器不支持 pushstate，Backbone 仍将退回到基于哈希的导航，因此不能保证它仍然不会执行“#bar”的事情。

我的建议是调整以使所有客户端路由都基于哈希，但如果您确定所有用户都将使用支持推送状态的浏览器，则可以使用这种方法。支持推送状态的浏览器可以在这里找到：

http://caniuse.com/#search=pushstate

希望对您有所帮助。

【讨论】：

【解决方案2】：

哈希片段 (#page) 用于提供这些永久链接，但随着 History API 的到来，

只需设置 pushState ：

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

【讨论】：

【解决方案3】：

将此代码添加到您的路由器初始化：函数

 $('body').delegate('a[href]:not([href^=\#])', 'click', function (e) {
       e.preventDefault();
   Backbone.history.navigate($(this).attr('href'), {trigger: true});

});

它在我的情况下工作

【讨论】：