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

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

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

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

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

先看对照表

API 是否新增历史记录 是否文档级跳转 常见场景
location.href = url 是 是 常规跳转
location.assign(url) 是 是 常规跳转（强调“执行导航”语义）
location.replace(url) 否 是 登录后跳转、不希望返回上页
location.reload() 不涉及 是（刷新当前页） 主动刷新当前页面

location.href属性

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

1
2
// 跳转到百度首页
location.href = 'https://www.baidu.com';

特点

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

示例

1
2
3
4
5
// 读取当前 URL
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。

相关链接