【笔记】location.href 和 location.assign 进行页面 URL 跳转
内容提要
本文介绍JavaScript中location.href与location.assign()进行页面跳转的用法。两者功能基本一致，都会新增历史记录并导航到新URL，主要区别在于href是属性赋值更简洁，assign是方法语义更明确且便于测试。文中还对比了location.replace()（不保留历史）和location.reload()（刷新页面），并建议SPA应用使用路由API。
延伸解读
历史记录与页面刷新：何时用 replace 和 reload
location.href 和 assign 都会新增历史记录，允许用户后退。但若希望用户无法返回上一页（如登录后跳转），应使用 replace()，它不会新增历史记录。reload() 用于刷新当前页，注意 reload(true) 并非标准写法，建议直接调用 reload()。
SPA 场景下的导航选择
在 React/Vue 等单页应用中，站内跳转应优先使用路由 API（如 router.push），因为 location.* 会触发文档级导航，导致整页重新加载，影响用户体验。仅当需要外部跳转或强制刷新时才考虑使用 location 对象。
测试友好性：assign 更易 mock
在单元测试中，location.assign() 作为方法更容易被 mock 或 spy，例如在 Jest 中可直接断言其调用参数。而 location.href 是属性赋值，测试时需模拟属性设置，相对不便。若项目重视可测试性，可优先选择 assign()。
Q&A
location.href 和 location.assign() 在页面跳转时有什么区别？
在常见页面跳转场景中，两者行为基本一致：都会导航到目标 URL 并新增一条历史记录（可后退）。主要区别在于 location.href 是属性赋值，语法更简洁；location.assign() 是方法调用，语义更明确，且更容易在单元测试中 mock 或 spy。
如何用 location.href 实现页面跳转？
直接给 location.href 赋值即可，例如：location.href = 'https://www.baidu.com'; 或 location.href = '/about'; 这会导航到新 URL 并新增历史记录。
location.assign() 方法如何使用？
调用 location.assign(url) 即可，例如：location.assign('https://www.baidu.com'); 或 location.assign('/about'); 它会加载指定 URL 并新增历史记录。
location.replace() 和 location.reload() 分别有什么作用？
location.replace(url) 会导航到新 URL 但不新增历史记录，常用于登录后跳转，避免用户返回上一页；location.reload() 用于刷新当前页面，建议只使用 location.reload()，不要带 true 参数。
在单页应用（SPA）中，应该使用 location.href 还是路由 API？
在 React/Vue 等单页应用中，站内跳转通常优先使用路由 API（如 router.push），因为 location.* 会触发文档级导航，通常导致整页重新加载，影响用户体验。
location.assign() 在测试方面有什么优势？
location.assign() 是方法，在单元测试中更容易 mock 或 spy，例如在 Jest 中可以直接断言它是否被调用以及参数是否正确。
location.href 和 location.assign() 在兼容性上有差异吗？
根据 caniuse，两者的兼容性一样，所有主流浏览器都支持，所以兼容性方面无需顾虑。
