骨干pushState的和错误404

Question

我试图实现{ 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

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

注意，使用真实的URL需要你的Web服务器能够正确显示这些页面，因此后端改变是必需的也是如此。例如，如果您的路由为/ documents/100，则如果浏览器直接访问该URL，则您的Web服务器必须能够提供该页面。对于完整的搜索引擎可爬行性，最好让服务器为页面生成完整的HTML ...但如果它是一个Web应用程序，只需渲染与根URL相同的内容，然后用Backbone填充其余内容视图和JavaScript工作正常。

换句话说，骨干不能帮助你，如果你的服务器不理解example.app/show - 你必须修复服务器，使用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

和骨干应该能够赶上它。