HTML5 history Start方法中的HTML5 pushState有什么用

Question

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

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/ 时，这个 url 会自动重定向到 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 将使用散列 (#) 来更改 URL，因此它不必重新加载页面。

When I pass pushState: true and I open localhost:3000/#/users/, this url automatically redirects to localhost:3000/users Why does this redirect happen ?

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

When I do not pass pushState: true then redirect does not happen. localhost:3000/#/users/ works fine but localhost:3000/users does not work ?

问题 2 的答案：当 pushState 未启用时，Backbone 将仅使用散列路由。所以 localhost:3000/#/users/ 不会重定向，因为它是 "right" 路由：它将显示内容。根据您设置服务器的方式，localhost:3000/users 将

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

Answer 2

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

HTML5 history Start方法中的HTML5 pushState有什么用

What is the use of HTML5 pushState in Backbone History Start method

html

javascript

backbone.js

JavaScript