在前端开发中，我们常常需要通过 JavaScript 对网页的 URL 进行变更。其中，location.href属性和location.assign()方法是两种常用的方式。虽然它们都可以实现跳转到新的页面，但是在某些场景下，选择哪一种方式就显得尤为重要。本文将详细介绍这两种方式的异同，并提供相关示例代码。
location.href属性
location.href是一个可读写的属性，表示当前页面的 URL。当我们改变它的值时，浏览器会跳转到新的页面。
示例代码如下：
-- ------- ------------- - ------------------------
较为简单明了的特点是，该属性不仅能够修改 URL，而且能够直接使浏览器加载新的资源。因此，在某些场景下，使用它可能更加方便。比如说，当我们需要把用户重新定向到另一个页面或者刷新当前页面时，可以使用location.href。
但是，其存在一个缺陷：如果新 URL 和原始 URL 是相同的，那么会强制刷新当前页面，即使什么也没有变化。这可能会导致用户体验的不良影响。
location.assign()方法
相对于location.href，location.assign()方法则更加灵活。它也可以跳转到新的页面，但是其实现方式不同。
示例代码如下：
-- ------- -----------------------------------------
由于该方法只会在 URL 发生变化时才会发挥作用，因此，即使新 URL 和原始 URL 相同，也不会强制刷新当前页面。这将显著提升用户体验。
此外，location.assign()还支持传递一个字符串参数、URL对象或者文件路径作为参数。这些参数都可以指定跳转到的页面地址。
选择何种方式？
那么，在什么情况下应该使用location.href，在什么情况下应该使用location.assign()呢？
- 如果需要刷新当前页面或者把用户重定向到另一个页面，则可以使用
location.href。 - 如果仅仅需要跳转到一个新页面，且希望避免强制刷新当前页面，就应该使用
location.assign()。
需要注意的是，虽然两种方式有所不同，但是它们都可以用来修改 URL。因此，如果我们需要通过 JavaScript 修改 URL，那么就有必要考虑两者之间的异同，并选择适合场景的方式。
总结
本文中，我们详细介绍了location.href和location.assign()两种改变网页 URL 的方式。虽然它们都能够实现跳转到新的页面，但是在某些场景下，选择哪一种方式就显得尤为重要。建议大家在编写代码时，结合实际需求进行选择，并对其异同性质有一个清晰的认识。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25712