Question

我正在尝试实现{ pushState : true }但它只适用于基本路由，而不是继续给我错误404的其他路径。

在Chrome中，如果我访问：

http://example.app/ - 确定显示控制台消息

我的路线是

    var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'index',
            'show': 'show'
        },

        index: function() {
            console.log('This is the index page');
        },
        show: function() {
            console.log('This is the show page');
        }

    });

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

我的.htaccess

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
   RewriteRule (.*) index.html [L]
</ifModule>

我错过了什么或者我做错了什么？

Answer 1

请记住，Backbone是一个客户端框架 - 如果您使用基于路径的URL进行路由（推送状态），您仍需要确保服务器为这些URL返回正确的标记。这总结在Backbone docs因此：

请注意，使用真实网址要求您的网络服务器能够正确呈现这些网页，因此也需要进行后端更改。例如，如果您的路径为/ documents / 100，则如果浏览器直接访问该网址，则您的网络服务器必须能够提供该网页。对于完整的搜索引擎可抓取性，最好让服务器为页面生成完整的HTML ...但如果它是一个Web应用程序，只需呈现与根URL相同的内容，使用Backbone Views和JavaScript填写其余内容工作正常。

换句话说，如果您的服务器不理解example.app/show，Backbone无法帮助您 - 您必须使用URL重写和/或服务器端修复服务器选择的语言。

Answer 2

您需要为该案例创建初始化函数。

我在Boilerplate路由器上连接了一些东西，只需在脚本末尾初始化路由器之前包含它。

var initialize = function() {

    var app_router = new AppRouter;

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

    $(document).on('click', 'a:not([data-bypass])', function(e){

        var href = $(this).prop('href');
        var root = location.protocol + '//' + location.host + '/';

        if (root === href.slice(0, root.length)){
            e.preventDefault();
            Backbone.history.navigate(href.slice(root.length), true);
        }
    });

};

Answer 3

我想你可能只是错过了网址中的“＃”。我现在正在关注一些教程，我才意识到他们如何停止请求进入服务器。

所以代替了 http://example.app/show
有 http://example.app/#/show

和骨干应该能够抓住它。

Backbone pushState和错误404

3 个答案: