本文详解URL中井号#的两种核心用途：作为标准fragment标识符实现锚点跳转，以及在单页应用中作为客户端路由分隔符（如/path#/file），重点阐明其不发送至服务端、不触发页面重载、仅影响浏览器滚动与历史记录的本质特性。
本文详解url中井号#的两种核心用途：作为标准fragment标识符实现锚点跳转，以及在单页应用中作为客户端路由分隔符（如`/path#/file`），重点阐明其不发送至服务端、不触发页面重载、仅影响浏览器滚动与历史记录的本质特性。
在标准URL语法中，# 是片段标识符（fragment identifier） 的起始符号，其后所有内容统称为 fragment。根据 RFC 3986，fragment 必须位于URL的最末端，且仅由浏览器解析、不参与HTTP请求——这意味着无论 # 出现在路径中何处，浏览器都会将其及之后的所有字符视为 fragment 的开始，并截断此前的URL用于实际请求。
例如：
https://example.com/path#/file
浏览器实际发出的HTTP请求是：
GET /path HTTP/1.1 Host: example.com
而 #/file 全部被剥离，不会到达服务器。此时 /path 是真实服务端资源路径，# 后的 /file 则纯粹由前端JavaScript读取并解释——这正是经典 Hash Router 的工作原理。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
✅ 正确理解的关键点：
-
#永远只生效一次，且必须是URL中最后一个#；若URL中出现多个#（如a#b#c），只有第一个#被识别为fragment起始，其后所有内容（含第二个#）均属于fragment值； -
#后允许使用除空格、换行、制表符及,>,",{,},|,\,^,`之外的任意UTF-8字符（需经百分号编码处理中文等特殊字符）； - 改变 fragment 不会刷新页面，但会新增浏览器历史记录条目，支持
window.onhashchange事件监听； - 若页面未定义对应
id="file"的元素，#/file不会触发滚动，但路由逻辑仍可正常执行。
⚠️ 常见误区警示：
- ❌ 认为
/path#/file中的#是路径分隔符或服务器可识别的路由符号； - ❌ 在服务端Nginx/Apache配置中试图代理或重写
#后内容（无效，因服务端根本收不到）； - ❌ 直接将未编码的中文或空格用于 fragment（应使用
encodeURIComponent('我的章节') → '%E6%88%91%E7%9A%84%E7%AB%A0%E8%8A%82'）。
现代实践建议：
虽然 HashRouter 因兼容性好（无需服务端配合）仍被广泛用于老项目或微前端场景，但推荐新项目优先采用基于 history.pushState() 的 BrowserRouter。若必须使用 hash 路由，可借助主流框架封装：
// 手动监听 hash 变化（兼容IE9+）
window.addEventListener('hashchange', () => {
const path = location.hash.slice(1); // 移除 '#'
renderViewForPath(path); // 如：'/file' → 渲染文件视图
});
// 初始化首次加载
renderViewForPath(location.hash.slice(1));
总结而言，URL中的 # 本质是一个客户端专属语义边界：它既承载着Web最原始的锚点定位能力，也演化为单页应用状态管理的轻量基石。理解其“不发往服务端、不触发重载、仅前端可见”的三大铁律，是规避路由失效、埋点丢失、SEO异常等线上问题的第一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
