Question

我有一个简单的Backbone应用。我试图理解在启动pusState: true对象时传递Backbone.History所产生的差异。

的JavaScript

var r = new (Backbone.Router.extend({
  routes: {
    "users": "allUsers",
    "users/new": "createUser"
  },

  allUsers: function () {
    v.render("showing all users");
  },
  createUser: function () {
    v.render("showing form for creating new user");
  }
}));

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

Q1。当我通过pushState: true并打开localhost:3000/#/users/时，此网址会自动重定向到localhost:3000/users 为什么会发生这种重定向？

Q2。当我没有通过pushState: true时，重定向就不会发生。 localhost:3000/#/users/工作正常但localhost:3000/users不起作用？

在history.start方法中传递此值的重要性以及为什么它很重要。

Answer 1

在启动pushState时包含Backbone.history选项会告诉Backbone使用HTML5历史记录API。基本上，此API允许您更改地址栏中的URL，而无需重新加载页面（see more about it here）。如果没有pushState，Backbone将使用哈希值（#）来更改网址，因此无需重新加载网页。

当我通过pushState: true并打开localhost：3000 /＃/ users /时，此网址自动重定向到localhost：3000 / users为什么会发生此重定向？

由于您已启用历史记录API，因此Backbone将选择使用实际路由（localhost:3000/users）而不是散列路由（localhost:3000/#/users/）。但是，它仍然了解散列路由，因此将它们重定向到实际路由。这样，如果您在现有应用程序中启用了pushState，则任何具有书签的散列路线的用户仍然可以使用该书签。（当然，任何新的书签都有正确的路线。）

当我没有传递pushState：true时，则不会发生重定向。 localhost：3000 /＃/ users /工作正常但localhost：3000 /用户不起作用？

回答Q2：当pushState未启用时，Backbone将仅使用散列路由。因此localhost:3000/#/users/不会重定向，因为它是“正确”的路线：它会显示内容。根据您设置服务器的方式，localhost:3000/users将

加载您的应用但不显示任何内容（或默认内容）
加载/users资源的所有内容，或者
给你一个404错误。

Answer 2

使用pushState时，您告诉Backbone应用程序在定义的URL（无哈希）后端从后端获取HTML。这意味着您的后端需要为此做好准备，这就是localhost:3000/users默认情况下如果您没有预见到后端资源的原因。从后端获取HTML虽然没有页面刷新，但它不会中断JS的运行。
当使用没有pushState的哈希时，您只使用前端路由器（哈希路由）及其回调，并且不会向后端发出请求。

Backbone History Start方法中HTML5 pushState的用途是什么

的JavaScript

2 个答案: