window.location.hash 属性用于获取或设置当前页面 URL 中的哈希部分（即 # 后面的部分）。它通常用于表示文档中的特定位置或为单页应用（SPA）设置路由。

基本语法：

let hash = window.location.hash;

返回值：

  • 字符串：返回当前 URL 中 # 后面的内容，包含 # 字符。如果没有哈希部分，返回空字符串 ""。

示例：

假设当前页面的 URL 为：

https://www.example.com/page#section1

console.log(window.location.hash);
// 输出: "#section1"

如果 URL 没有哈希部分，例如：

https://www.example.com/page

console.log(window.location.hash);
// 输出: ""

设置哈希：

你也可以通过设置 window.location.hash 来改变 URL 中的哈希部分。例如：

window.location.hash = "#section2";

这会将页面 URL 改为：

https://www.example.com/page#section2

特点：

  • 不会导致页面重新加载：改变 hash 部分不会引起页面重新加载。只有当哈希值改变时，浏览器才会尝试将页面滚动到对应的锚点位置。
  • 用于单页应用（SPA）：哈希常用于 SPA 中进行路由控制。通过更改 window.location.hash，你可以在不重新加载页面的情况下切换页面视图或状态。
  • 哈希值变化时触发事件：当 hash 值发生变化时，浏览器会触发 hashchange 事件，可以用来处理页面的状态变化。

示例：监听哈希变化

你可以监听 hashchange 事件，在哈希值变化时执行特定操作：

window.addEventListener('hashchange', function() {
  console.log('哈希值已更改为：', window.location.hash);
});

每当哈希值发生变化时，这个事件会被触发，输出新的哈希值。

常见用途：

  • 页面内跳转：用于锚点跳转。例如，点击一个链接跳转到页面中的特定部分：<a href="#section1">跳转到 Section 1</a> <div id="section1">这是 Section 1</div>
  • 单页应用路由：在 SPA 中，可以使用哈希值来模拟页面路由，通过改变哈希值来显示不同的内容而不刷新页面。
  • 记录当前页面状态：在某些情况下，哈希值用于记录应用的当前状态，以便用户可以通过浏览器的“后退”按钮恢复到之前的状态。

例子：SPA 路由管理

// 页面加载时，根据哈希决定显示哪个页面内容
window.addEventListener('load', function() {
  switch(window.location.hash) {
    case '#home':
      showHomePage();
      break;
    case '#about':
      showAboutPage();
      break;
    default:
      showDefaultPage();
      break;
  }
});

// 模拟哈希值变化时更新页面内容
window.addEventListener('hashchange', function() {
  console.log('当前哈希值：', window.location.hash);
  // 可以根据新的哈希值加载相应的内容
});

总结：

  • window.location.hash 用于获取或设置 URL 中的哈希部分。
  • 通过改变哈希值，可以在页面中进行跳转而不刷新页面。
  • 常用于锚点跳转和单页应用的路由控制。
  • 哈希值的变化不会导致页面刷新，可以通过监听 hashchange 事件来动态处理页面内容。

如果你有具体的应用场景或者需要更详细的示例，随时告诉我！