Question

我使用coenraets'Employee Directory作为我的Backbone应用程序的起点。我想做的第一件事就是改变路由以使用HTML5 PushState而不是hash-hash bang-bangs。

首先我改变了：

<ul class="nav">
  <li class="active"><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

，然后

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

现在，如果您转到localhost:8000/contacts而不是localhost:8000/#/contacts，则会出现404错误，无论您是单击导航栏还是手动输入网址。

我做错了吗？感谢。

更新：我添加了此代码，当我点击链接 [有状态] 时，它现在正常工作。但如果我在localhost:8000/contacts时刷新页面，我仍然会收到404错误 [无状态] 。

$(document).on('click', 'a:not([data-bypass])', function(e){
  href = $(this).prop('href')
  root = location.protocol+'//'+location.host+'/'
  if (root===href.slice(0,root.length)){
    e.preventDefault();
    Backbone.history.navigate(href.slice(root.length), true);
  }
});

更新2

除了上面的代码，我在Express.js应用程序中添加了以下路由。如果你仔细观察，你会注意到网址栏从localhost:3000/#contact更改为localhost:3000/contact，尽管它发生得非常快。也许有更好的方法来做这件事，但我对这种方法感到满意。

app.get('/contact', function(req, res) {
  res.redirect('/#contact');
});

Answer 1

假设您只有一个html文件。您需要使用类似的东西，所有路线都显示相同的html文件：

app.configure(function () {

  // static files
  app.use(express.static(__dirname + '/public'));

  // default html file (with any request)
  app.use(function (req, res) {
    var contents = fs.readFileSync(__dirname + '/public/index.html');
    res.send(contents.toString());
  });

});

我不知道是否对你有用。这是给我的。

Answer 2

不，这可能不是您的更新2中的最佳方式。

由于我们正在做的是单页应用程序，所以我们需要做的只是：

服务器端：
对于http://yourdomain.com/whatever这样的请求，您只需返回index页面即可。

Frond end：
没有。 Backbone会自动处理它，它会自动将网址http://yourdomain.com/whatever更改为http://yourdomain.com/#whatever。由于我们使用{pushstate: true}，因此Backbone会将其更改为http://yourdomain.com/whatever以供用户查看。所有这一切都是透明的（您最后需要做的就是删除#链接中的url。）

如何在Backbone.js中正确使用HTML5 pushState？

更新2

2 个答案: