location.href和location.assign()进行页面 URL 跳转

两者都可以触发页面导航（跳转到新 URL）。

在常见页面跳转场景中，location.href = url 和 location.assign(url) 的行为基本一致：

• 都会导航到目标 URL
• 都会新增一条历史记录（通常可后退）

MDN 对 href 的描述是：它返回完整 URL，并且允许更新；设置 href 会导航到该 URL。
MDN 对 assign() 的描述是：它会让窗口加载并显示指定 URL 的文档。

先看对照表

location.href属性

location.href 是一个可读写属性，表示当前页面的 URL。当我们改变它的值时，浏览器会跳转到新的页面。

1
2

location.href = 'https://www.baidu.com';

特点

• 语法简洁：属性赋值，代码短
• 历史记录：会新增历史条目，可后退
• 兼容性好：所有主流浏览器都支持

示例

1
2
3
4
5

console.log(location.href);


location.href = '/about';

location.assign()方法

location.assign() 是 Location 接口的方法，用于加载给定 URL。

在常见页面跳转场景中，它与 location.href 赋值的效果基本一致。

1
2
3
4
5

location.assign('https://www.baidu.com');


location.assign('/about');

特点

• 语义明确：方法调用更像“执行一次导航”
• 历史记录：会新增历史条目，可后退
• 参数形式：可传绝对 URL、相对 URL、hash、URL 对象等可转为 URL 的值
• 对测试友好：location.assign() 是方法，单元测试里更容易 mock / spy，比如在 Jest 里可以直接断言它是否被调用、参数是否正确

从 caniuse 来看，兼容性和 href 一样，所以兼容性角度来看也不用顾虑。

API 说明（异常）

• 由于安全限制无法导航时，可能抛出 DOMException（如 SecurityError）
• 传入无效 URL 时，可能抛出 DOMException（如 SyntaxError）

如何选择使用？

location.href vs location.assign()

对一般开发者来说，这两个 API 在日常跳转里差异很小，主要按团队风格选择：

• 使用 location.href：更短、更常见
• 使用 location.assign()：语义更明确

1
2
3

location.href = '/products';
location.assign('/products');

此外，我们知道 location.href 也可作为可读属性，因此从能力上可以说比 assign 更多一点。

StackOverflow 上在十几年前也有关于两个 API 的 pk 讨论（location.href property vs. location.assign method），但结果是“主流共识：功能上基本等价”、““性能差异”被讨论很多，但结论是：有争议且不重要”。

*不希望保留历史记录：location.replace()

1
2

location.replace('/dashboard');

*需要刷新页面：location.reload()

1
2

location.reload();

location.reload(true) 是历史写法，true 参数并非跨浏览器标准行为。实际项目中建议只使用 location.reload()。

*SPA 场景提示

在 React/Vue 等单页应用中，站内跳转通常优先使用路由 API（如 router.push）。

location.* 会触发文档级导航，通常会导致整页重新加载。

为什么 location.assign() 使用相对较少？

主要是工程习惯问题：

• location.href 更短
• 历史示例更多，团队更熟悉
• 常见场景下两者效果接近

总结

单从 URL 跳转角度来看，location.href 和 location.assign() 行为基本一致，团队中只要保持习惯统一即可，如果要考虑测试场景，location.assign() 在相对更好 mock。

相关链接

• MDN: Location
• MDN: Location.href
• MDN: Location.assign()
• MDN: Location.reload()
• https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-location-assign
• stackOverflow: location.href property vs. location.assign() method