骨干pushState的和错误404(Backbone pushState and error 40

我想实现{ pushState : true } ，但它只能用于基本路线，不与其他那些继续给我404错误。

在Chrome中，如果我访问：

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

http://example.app/show -返回错误404

我的路线是

    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:

请记住，骨干是一个客户端框架 - 如果你正在使用基于路径的URL路由（按压状态），你仍然需要确保服务器返回这些URL正确的标记。这是在总结了骨干文档正是如此：

请注意，使用真实的URL需要你的Web服务器能够正确显示这些页面，因此后端改变是必需的也是如此。例如，如果您有/文件路径/ 100，您的Web服务器必须能够投放页面，如果浏览器直接访问该网址。对于全搜索引擎爬行，最好让服务器生成页面的完整HTML ...但如果它是一个Web应用程序，只是渲染你会为根URL相同的内容，并与骨干其余灌装意见和JavaScript正常工作。

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

Answer 2:

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

我迷上了一些样板路由器上，就包括这在你的脚本结束初始化路由器之前。

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);
        }
    });

};