【window.location.href】在网页开发中，`window.location.href` 是一个非常常用的 JavaScript 属性，用于获取或设置当前页面的 URL。它不仅可以帮助开发者获取当前页面的地址信息，还可以用于页面跳转、重定向等操作。本文将对 `window.location.href` 的基本用法、功能以及常见应用场景进行总结，并通过表格形式清晰展示其属性和方法。
一、`window.location.href` 简介
`window.location.href` 是 `window.location` 对象的一个属性，主要用于读取或修改当前浏览器窗口加载的文档的 URL 地址。当设置该属性时，浏览器会立即加载新的 URL，实现页面跳转。
- 读取：获取当前页面的完整 URL。
- 设置：改变当前页面的 URL，触发页面重新加载。
二、常用属性与方法对比
| 属性/方法 | 说明 | 功能 |
| `window.location.href` | 获取或设置当前页面的完整 URL | 用于跳转页面或获取当前地址 |
| `window.location.pathname` | 获取当前页面的路径部分（不包括域名和参数） | 用于提取页面路径 |
| `window.location.search` | 获取 URL 中的查询字符串（即 `?` 后的内容） | 用于解析 URL 参数 |
| `window.location.hash` | 获取 URL 中的锚点部分（即 `` 后的内容） | 用于单页应用中的路由控制 |
| `window.location.reload()` | 重新加载当前页面 | 用于刷新页面内容 |
| `window.location.replace(url)` | 替换当前页面为新 URL，不会在历史记录中留下记录 | 用于页面跳转且不保留历史记录 |
| `window.location.assign(url)` | 加载一个新的 URL，会在历史记录中添加一条记录 | 用于页面跳转并保留历史 |
三、实际应用示例
1. 页面跳转
```javascript
window.location.href = "https://www.example.com";
```
2. 获取当前 URL
```javascript
console.log(window.location.href);
```
3. 跳转到特定锚点
```javascript
window.location.href = "section1";
```
4. 带参数跳转
```javascript
window.location.href = "https://www.example.com?user=123";
```
四、注意事项
- 使用 `window.location.href` 进行跳转时，会触发页面重新加载，因此不适合频繁使用。
- 在单页应用（SPA）中，建议使用 `history.pushState()` 或 `history.replaceState()` 来实现无刷新跳转。
- 设置 `href` 时要确保 URL 正确，否则可能导致页面无法正常加载。
五、总结
`window.location.href` 是 JavaScript 中处理页面导航的核心工具之一，适用于各种需要动态跳转或获取当前 URL 的场景。通过合理使用其相关属性和方法，可以提升用户体验并增强网页的交互性。在实际开发中，结合其他 `location` 属性如 `pathname`、`search` 和 `hash`，可以更灵活地管理 URL 信息和页面状态。