URL哈希符号#的双重角色：既是片段标识符，也是前端路由状态载体-js教程-PHP中文网

URL哈希符号#的双重角色：既是片段标识符，也是前端路由状态载体

URL中的#符号本质是fragment identifier（片段标识符），它不参与HTTP请求、不发送至服务器，仅由浏览器解析用于锚点定位或单页应用（SPA）的客户端路由管理。

url中的`#`符号本质是fragment identifier（片段标识符），它不参与http请求、不发送至服务器，仅由浏览器解析用于锚点定位或单页应用（spa）的客户端路由管理。

在标准URL语法中，#具有严格的语义边界：它及其后所有内容构成fragment部分，且仅能出现一次，且必须位于URL末尾（即查询参数?之后、URL终点之前）。因此，像 https://example.com/path#/file 这样的写法，从规范角度看——# 仍被浏览器识别为fragment起始符，其后的 /file 就是完整的fragment值，等价于 #%2Ffile（经编码后语义不变）。此时，整个URL实际被解析为：

路径（path）: /path
fragment: /file

这意味着：

浏览器不会向服务端发送 /file 部分；
服务端收到的请求仍是 GET /path，与 # 无关；
页面加载完成后，浏览器会尝试滚动至页面内 id="/file" 或 name="/file" 的元素（若存在）；但更常见的是——该fragment被前端路由库（如早期Vue Router的hash模式、React Router v5的HashRouter）主动读取并用作路由状态标识。

例如，一个典型的SPA可能这样使用：

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

<!-- 前端路由监听示例 -->
<script>
  // 监听 hash 变化
  window.addEventListener('hashchange', () => {
    const route = window.location.hash.slice(1); // 获取 '/file'
    if (route === '/file') {
      loadFileView(); // 动态渲染文件模块
    } else if (route === '/settings') {
      loadSettingsView();
    }
  });

  // 初始化
  window.dispatchEvent(new Event('hashchange'));
</script>

⚠️ 注意事项：

非法位置 ≠ 无效语法：# 出现在路径中间（如 /path#/file）虽不符合直觉，但完全合法——URL解析器只认第一个#，后续字符全部归入fragment；
中文与特殊字符需编码：若fragment含中文（如 #用户指南），必须编码为 #%E7%94%A8%E6%88%B7%E6%8C%87%E5%8D%97，否则可能触发解析异常或乱码；
空fragment（#）会强制滚动至页面顶部，常被用作“返回顶部”逻辑；
重复设置相同hash不会触发hashchange事件，需配合history.replaceState()或手动触发以规避；
现代应用推荐迁移到history.pushState()（HTML5 History API）模式，但hash模式因兼容性好、无需服务端配置，在老旧系统或静态托管环境（如GitHub Pages）中仍具实用价值。