DEV Community
·
查询字符串与哈希片段：真正的区别是什么？
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
URL查询字符串与哈希片段的主要区别在于，#前的内容会发送给服务器，而#后的内容仅在浏览器中处理。传统页面使用查询字符串加载内容，而单页应用（SPA）则依赖哈希进行路由。哈希不影响缓存，而查询字符串会影响缓存版本。理解这些差异对开发至关重要。
🎯
关键要点
-
URL查询字符串与哈希片段的主要区别在于，#前的内容会发送给服务器，而#后的内容仅在浏览器中处理。
-
传统页面使用查询字符串加载内容，而单页应用（SPA）则依赖哈希进行路由。
-
哈希不影响缓存，而查询字符串会影响缓存版本。
-
使用哈希可以在不刷新页面的情况下改变前端显示的内容。
-
不同的查询字符串会导致不同的缓存版本，而哈希片段不会影响缓存。
-
在Next.js中，查询字符串可以通过useRouter钩子获取，而哈希片段需要使用window.location.hash。
-
URL不仅仅是链接，它们承载着指令，格式的不同可能会影响用户看到的内容。
❓
延伸问答
查询字符串和哈希片段的主要区别是什么？
查询字符串在#前，发送给服务器；哈希片段在#后，仅在浏览器中处理。
为什么单页应用（SPA）使用哈希进行路由？
单页应用使用哈希可以在不刷新页面的情况下改变前端显示的内容。
查询字符串如何影响缓存？
不同的查询字符串会导致不同的缓存版本，而哈希片段不会影响缓存。
在Next.js中如何获取查询字符串和哈希片段？
查询字符串可以通过useRouter钩子获取，哈希片段需要使用window.location.hash。
使用哈希片段有什么优势？
哈希片段不影响缓存，适合仅改变前端行为而不需要服务器交互的场景。
查询字符串和哈希片段在传统页面中的作用是什么？
传统页面使用查询字符串加载内容，而哈希片段主要用于页面内导航。
➡️
