【location.hash跳转】在前端开发中，`location.hash` 是一个常用的属性，用于获取或设置当前 URL 的锚点部分。通过修改 `location.hash`，可以实现页面内的跳转或导航，而无需重新加载整个页面。这种方式在单页应用（SPA）中非常常见。
一、总结
| 项目 | 内容 |
| 定义 | `location.hash` 是 JavaScript 中 `window.location` 对象的一个属性，用于获取或设置当前 URL 的锚点部分（即 后面的内容）。 |
| 作用 | 实现页面内跳转、无刷新导航、记录用户状态等。 |
| 语法 | `window.location.hash = 'value';` 或 `location.hash = 'value';` |
| 特点 | - 不会触发页面刷新 - 可以用于单页应用的路由机制 - 支持浏览器历史记录 |
| 应用场景 | - 页面内导航（如导航栏跳转到不同模块） - 深度链接（Deep Linking） - 保存用户浏览状态 |
二、location.hash 跳转原理
当 `location.hash` 被修改时，浏览器会触发 `hashchange` 事件。开发者可以通过监听这个事件来响应 URL 的变化，并根据不同的 hash 值加载对应的内容或执行相应的逻辑。
示例代码：
```javascript
// 设置 hash 值
location.hash = 'section1';
// 监听 hash 变化
window.addEventListener('hashchange', function() {
console.log('当前 hash: ', location.hash);
});
```
三、与 `location.href` 的区别
| 特性 | `location.hash` | `location.href` |
| 是否刷新页面 | ✅ 不刷新 | ❌ 刷新 |
| 修改方式 | 修改锚点部分 | 修改整个 URL |
| 应用场景 | 页面内跳转、SPA 路由 | 完整页面跳转 |
| 重定向能力 | ✅ 仅限当前页面 | ✅ 可跳转任意页面 |
四、注意事项
- `location.hash` 的值是字符串类型，不包含 `` 符号。
- 如果直接使用 `location.href = 'section1'`，同样会触发页面跳转，但和 `location.hash` 的行为略有不同。
- 在某些浏览器中，频繁修改 `location.hash` 可能会影响性能，需合理控制。
五、小结
`location.hash` 是一种轻量级的页面内跳转方式，适合在不需要重新加载页面的情况下实现导航功能。它常用于单页应用中，结合 `hashchange` 事件可以实现动态内容加载。虽然现代框架（如 React Router、Vue Router）提供了更高级的路由机制，但在一些简单场景下，`location.hash` 依然是一个实用且高效的解决方案。