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

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

本文关键字：是什么 方法 pushState Backbone History Start HTML5      更新时间：2023-09-26

我有一个简单的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 });

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

问题 2.当我不通过pushState: true时，重定向不会发生。 localhost:3000/#/users/工作正常，但localhost:3000/users不起作用？

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

在启动时包含pushState选项Backbone.history告诉 Backbone 使用 HTML5 历史记录 API。基本上，此 API 允许您更改地址栏中的 URL，而无需重新加载页面（在此处查看更多相关信息）。如果没有pushState，Backbone将使用哈希（#）来更改URL，因此它不必重新加载页面。

当我通过pushState: true并打开本地主机：3000/#/用户/时，此网址会自动重定向到本地主机：3000/用户 为什么会发生这种重定向？

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

当我不传递 pushState： true 时，重定向不会发生。 本地主机：3000/#/用户/

工作正常，但本地主机：3000/用户不起作用？

回答问题 2：如果未启用pushState，Backbone 将仅使用哈希路由。因此，localhost:3000/#/users/不会重定向，因为它是"正确"的路线：它将显示内容。根据您设置服务器的方式，localhost:3000/users

  1. 加载应用但不显示任何内容（或默认内容）
  2. 加载/users资源，或者
  3. 给你一个 404 错误。

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

相关文章：