window.location 对象是浏览器的地址栏（URL）信息的一个属性，它包含了当前页面的完整 URL，并提供了操作 URL 的多种方法。通过 window.location，你可以获取、设置或修改浏览器的地址，进行页面跳转、重定向等操作。

window.location 实际上是一个 Location 对象，提供了很多常用的属性和方法，用于操作当前页面的 URL。

1. window.location 的常用属性

• window.location.href：返回当前页面的完整 URL，包含协议、主机、路径、查询字符串等。

  console.log(window.location.href);  // 获取当前页面的完整 URL

你也可以通过修改 href 来跳转到新的页面：

  window.location.href = 'https://www.example.com';  // 跳转到新的 URL

• window.location.protocol：返回当前 URL 的协议部分（例如：http:、https:）。

  console.log(window.location.protocol);  // 获取当前协议（http: 或 https:）

• window.location.host：返回当前 URL 的主机部分，包含域名和端口号（例如：www.example.com:80）。

  console.log(window.location.host);  // 获取当前主机（域名和端口号）

• window.location.hostname：返回当前 URL 的主机名部分（不包含端口号），例如：www.example.com。

  console.log(window.location.hostname);  // 获取当前主机名

• window.location.port：返回当前 URL 的端口号部分（如果有的话）。

  console.log(window.location.port);  // 获取当前端口号

• window.location.pathname：返回当前 URL 的路径部分（例如：/path/to/page）。

  console.log(window.location.pathname);  // 获取当前页面的路径

• window.location.search：返回当前 URL 的查询字符串部分（包括 ?），例如：?id=123&name=John。

  console.log(window.location.search);  // 获取查询字符串

• window.location.hash：返回当前 URL 的锚部分（例如：#section1）。

  console.log(window.location.hash);  // 获取 URL 的锚部分

2. window.location 的常用方法

• window.location.assign()：加载指定的 URL，相当于修改 href，但不保留当前页面的历史记录。

  window.location.assign('https://www.example.com');  // 跳转到新的页面

• window.location.replace()：加载指定的 URL，但不会将当前页面加入历史记录。也就是说，用户按“后退”按钮时不会回到当前页面。

  window.location.replace('https://www.example.com');  // 跳转并不保留历史记录

• window.location.reload()：重新加载当前页面，相当于按 F5 刷新页面。

  window.location.reload();  // 刷新页面

如果传递 true 给 reload()，将强制浏览器重新从服务器加载页面，而不是使用缓存：

  window.location.reload(true);  // 强制从服务器加载页面

• window.location.toString()：返回 window.location 的字符串表示形式，通常与 window.location.href 相同。

  console.log(window.location.toString());  // 获取完整的 URL 字符串

3. 操作 URL 结构

window.location 对象使你可以单独访问和修改 URL 的不同部分。通过它，你可以动态地更改页面的路径、查询参数、哈希等，而不需要完全刷新页面。

示例 1: 修改查询参数

假设你有以下 URL：https://www.example.com?page=1&sort=asc

你可以通过修改查询字符串来更改 URL，而不需要重新加载页面。

// 修改查询字符串
let currentURL = window.location.href;
let newURL = currentURL.split('?')[0] + '?page=2&sort=desc';
window.location.href = newURL;  // 跳转到新的 URL

示例 2: 获取和设置哈希值

哈希值通常用于页面中的锚点。你可以动态地获取或更改它，以便直接滚动到页面中的特定部分。

// 获取当前 URL 的哈希值
console.log(window.location.hash);  // 例如：#section1

// 设置新的哈希值
window.location.hash = '#section2';  // 滚动到页面中的 #section2 部分

示例 3: 使用 replace() 方法进行跳转

replace() 方法用于替代当前页面，跳转到新的页面，并且不会将当前页面记录到浏览器历史中。

// 使用 replace 跳转
window.location.replace('https://www.example.com');  // 不会保存当前页面在历史记录中

示例 4: 刷新页面

使用 reload() 方法刷新页面。

// 刷新当前页面
window.location.reload();  // 刷新页面

4. 总结

window.location 是一个非常有用的对象，允许你操作和控制浏览器的地址栏。它提供了多种方法和属性，用于获取和修改当前页面的 URL、查询字符串、路径、哈希值等。通过它，开发者可以实现页面跳转、刷新、重定向以及动态修改 URL 的需求。

掌握 window.location 对象的使用，可以帮助你创建更灵活和动态的网页，改进用户体验，甚至进行一些高级的路由控制。更多详细内容请关注其他相关文章。