【location.hash跳转】在前端开发中，`location.hash` 是一个常用的属性，用于获取或设置当前 URL 的锚点部分（即 `` 后面的内容）。通过修改 `location.hash`，可以实现页面内的跳转或导航，而无需重新加载整个页面。这种方式常用于单页应用（SPA）中的路由管理、页面内定位等功能。
一、location.hash 简介
| 属性 | 描述 |
| `location.hash` | 获取或设置当前 URL 的锚点部分，例如 `section1` |
| `window.onhashchange` | 当 `location.hash` 发生变化时触发的事件 |
二、location.hash 跳转原理
当使用 `location.hash = 'section2'` 时，浏览器会将当前 URL 的哈希值更新为 `section2`，并触发 `onhashchange` 事件。开发者可以通过监听该事件来执行相应的操作，如动态加载内容、滚动到指定位置等。
三、location.hash 跳转的常见用途
| 应用场景 | 说明 |
| 页面内导航 | 如文档阅读器中跳转到不同章节 |
| 单页应用路由 | 实现类似传统多页应用的导航效果 |
| 数据传递 | 在不刷新页面的情况下传递参数 |
| 历史记录管理 | 通过 `history.pushState()` 配合 `hash` 实现更灵活的路由 |
四、location.hash 跳转示例代码
```javascript
// 设置 hash 跳转
location.hash = 'section2';
// 监听 hash 变化
window.addEventListener('hashchange', function() {
console.log('当前 hash: ', location.hash);
// 根据 hash 加载对应内容
});
```
五、与 history.pushState 的对比
| 特性 | location.hash | history.pushState |
| 是否改变 URL | 是 | 是 |
| 是否触发页面刷新 | 否 | 否 |
| 兼容性 | 非常好 | 现代浏览器支持 |
| 复杂度 | 简单 | 较复杂 |
| 适用场景 | 简单跳转、兼容旧项目 | 复杂 SPA 路由 |
六、注意事项
- `location.hash` 不会触发页面重新加载，适合做轻量级跳转。
- 使用 `onhashchange` 事件时需注意内存泄漏问题。
- 若需要更高级的路由功能，建议结合 `history.pushState()` 或使用前端框架（如 Vue Router、React Router）。
总结
`location.hash` 是一种简单有效的页面跳转方式，适用于多种前端场景。虽然它不如 `history API` 功能强大，但在兼容性和实现难度上更具优势。合理使用 `location.hash` 可以提升用户体验和页面性能，尤其在单页应用中具有重要价值。