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

2023年1月3日 248次阅读

我使用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,则无论您是单击Navbar还是手动输入URL,都会出现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应用程序中添加了以下路由.如果你仔细观察,你会注意到URL栏从localhost：3000 / #contact更改为localhost：3000 / contact虽然它发生得非常快.也许有更好的方法来做这件事,但我对这种方法很满意.

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

最佳答案 假设您只有一个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());
  });

});

我不知道是否对你有用.这对我来说.

点赞