Wayne的技术博客
·
【笔记】location.href 和 location.assign 进行页面 URL 跳转
💡
原文中文，约2400字，阅读约需6分钟。
📝
内容提要
本文讨论了 JavaScript 中的 URL 跳转方法，比较了 `location.href` 和 `location.assign()` 的异同。两者都能实现页面导航并新增历史记录，但 `location.assign()` 语义更明确，适合测试场景。通常使用 `location.href` 更为常见。对于不希望保留历史记录的情况，可使用 `location.replace()`。在单页应用中，建议使用路由 API 进行跳转。
🎯
关键要点
- location.href 和 location.assign() 都可以实现页面导航并新增历史记录。
- location.assign() 的语义更明确，适合测试场景。
- 通常使用 location.href 更为常见，语法简洁且兼容性好。
- 对于不希望保留历史记录的情况，可以使用 location.replace()。
- 在单页应用中，建议使用路由 API 进行跳转，避免整页重新加载。
❓
延伸问答
location.href 和 location.assign() 有什么区别？
两者都可以实现页面导航并新增历史记录，但 location.assign() 的语义更明确，适合测试场景。
在什么情况下应该使用 location.replace()？
当不希望保留历史记录时，可以使用 location.replace()，例如登录后跳转。
在单页应用中，如何进行页面跳转？
在单页应用中，建议使用路由 API 进行跳转，避免整页重新加载。
location.href 的特点是什么？
location.href 语法简洁，历史记录会新增条目，兼容性好，所有主流浏览器支持。
为什么 location.assign() 使用较少？
主要是工程习惯问题，location.href 更短且历史示例更多，团队更熟悉。
如何选择使用 location.href 或 location.assign()？
一般开发者可根据团队风格选择，使用 location.href 更短、更常见，使用 location.assign() 语义更明确。
➡️
