HTML5 pushState 在 Backbone History Start 方法中的用途是什么?
What is the use of HTML5 pushState in Backbone History Start method
我有一个简单的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
- 加载应用但不显示任何内容(或默认内容)
- 加载
/users
资源,或者 - 给你一个 404 错误。
使用 pushState 时,您告诉 Backbone 应用程序从后端定义的 URL(无哈希)获取 HTML。这意味着您的后端需要为此做好准备,这就是为什么如果您没有预见到后端资源,默认情况下localhost:3000/users
不起作用的原因。但是,从后端获取 HTML 无需刷新页面,因此它不会中断 JS 的运行。
在没有 pushState 的情况下使用哈希时,您仅使用前端路由器(哈希路由)及其回调,并且不会向后端发出任何请求。
- 打破承诺链的好方法是什么
- 在JavaScript中拆分日期字符串的更好方法是什么
- 将jQuery.ech()方法转换为本地JavaScript抽象的最佳方法是什么
- 处理浮点错误的最佳方法是什么
- 基于窗口宽度jquery的函数的替代方法是什么
- 实现比较方法的最佳实践是什么;s的比较类型是在运行时选择的
- knex:根据结果创建数组的合适方法是什么
- 以编程方式填充组合框道场 (1.8) 的最佳方法是什么?
- node.js是否具有'match()'方法如果是,语法是什么
- 使用Modernizr检测移动设备最可靠的方法是什么
- 确定var是否是javascript中的elementFinder对象的方法是什么
- 用javascript修复这个JSON对象字符串最干净的方法是什么
- 让会话值可用于JavaScript的好方法是什么
- 从AngularJs获取谷歌地图对象的正确方法是什么
- 使用ReactJS和Flux架构从服务器获取数据的正确方法是什么
- 列出没有 mysql 的元素的最佳方法是什么
- 克服错误的更优雅的方法是什么:需要对象说明符.当通过JXA通过Messages发送SMS时,参数没有对象说明符
- 使用较少代码隐藏和显示选择菜单内容的更好方法是什么?javascript
- 在 Javascript 中实现解耦代码/回调的正确方法是什么?
- 使用Javascript,获取元素的方法是什么,基于打开和关闭标记之间的文本