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）中仍具实用价值。
归根结底，#不是“可随意插入的分隔符”，而是URL语义分层的关键锚点：它划清了「服务器职责」与「客户端自治」的边界——前半段交给后端寻址，后半段留给前端调度。理解这一点，才能真正驾驭路由、锚点、埋点、SEO适配等一整套Web导航体系。
