JavaScript 中如何使用 location 和 location.href？

在 JavaScript 中，我们可以通过 location 和 location.href 来控制页面的导航。具体来说，location 对象代表当前窗口中显示的文档的 URL，而 location.href 是 location 对象的一个属性，代表当前文档的完整 URL。

修改当前 URL

我们可以通过设置 location.href 来修改当前文档的 URL。例如，下面的代码将会将当前文档的 URL 改为 https://www.google.com：

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

需要注意的是，这将会直接导致页面的跳转到新的 URL。

与前进、后退操作交互

location 对象还提供了一些与浏览器的前进、后退操作相关的方法，包括 back()、forward() 和 go()。这些方法分别对应于点击浏览器的后退、前进按钮以及在历史记录中跳转到指定的页面。

// 后退一页
location.back();

// 前进一页
location.forward();

// 跳转到历史记录中的某一页
location.go(-2); // 跳转到倒数第二个页面

修改 URL 的某些部分

如果需要仅仅修改 URL 的某些部分，例如修改查询字符串、更改哈希值等，我们可以直接修改 location 对象的相应属性。

// 修改查询字符串
location.search = '?page=2&size=10';

// 更改哈希值
location.hash = '#example';

需要注意的是，这些属性的修改都将会直接改变当前文档的 URL，可能导致浏览器的跳转或刷新页面。

参考资料

• MDN: Window.location