url片段（#后内容）不刷新页面且不可被后端读取，但可通过javascript监听hashchange事件实现轻量dom显隐控制；需标准化哈希值（解码+小写）、安全匹配id、用pushstate切换并手动同步视图状态。
URL 片段（即 # 后面的部分）本身不触发页面刷新，也不能被后端读取，但它能被 JavaScript 实时监听，是控制 DOM 显示/隐藏状态最轻量、最直接的手段——尤其适合单页式内容切换，比如分类筛选、锚点导航、Tab 切换。
用 location.hash 读取当前片段并匹配 DOM ID
浏览器每次哈希变化都会触发 hashchange 事件，但首次加载时该事件不会自动触发，必须手动读一次 location.hash：
- 去掉开头的
#：用location.hash.slice(1)或location.hash.replace(/^#/, '') - 确保值是合法 ID：只保留字母、数字、连字符、下划线（
/^[a-zA-Z0-9_-]+$/），避免注入或匹配失败 - 用
document.getElementById(id)查找目标元素；查不到就 fallback 到默认区块（如id="all"） - 不要用
querySelector直接拼字符串，比如document.querySelector(`[id="${id}"]`)—— ID 中若含.、[等特殊字符会报错
切换时用 history.pushState() 替代直接赋值 location.hash
直接改 location.hash = 'webdesign' 会触发两次 hashchange（一次是设置，一次是浏览器自动 scroll 到对应元素），干扰逻辑；更可控的方式是：
- 调用
history.pushState(null, '', `#${id}`)，不触发滚动，也不触发重复事件 - 随后手动显示目标区块、隐藏其他同类区块（比如所有
.section） - 如果需要兼容旧浏览器（IE9+），
pushState不可用时再降级为location.hash = id - 注意：不要在
hashchange回调里再调pushState，否则可能陷入循环
DOM 还原不是“清空重写”，而是“显隐切换 + 状态同步”
所谓“还原”，是指回到 URL 片段所声明的视图状态，不是把整个页面 innerHTML 重置。重点在于：
- 所有可切换区块应有统一 class（如
class="content-section"），初始 CSS 设为display: none - 仅对匹配
location.hash的区块设style.display = 'block'（或加 active 类） - 若区块内含表单或动态状态（如输入框值、选中 radio），需额外保存/恢复——
location.hash不存这些，得靠localStorage或sessionStorage配合 - 避免在
hashchange里重复绑定事件；推荐用事件委托或初始化时一次性绑定
真正容易被忽略的是：哈希值未标准化时的大小写和编码问题。比如用户手输 #WebDesign，而你的区块 ID 是 webdesign，就会匹配失败；URL 中中文或空格会被编码成 %E4%BD%A0%E5%A5%BD，直接比对会出错——务必在读取后做 decodeURIComponent() 和统一小写处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
