当我们在前端页面中进行网站内导航时，通常会使用 URL 上的哈希（#）来定位到页面的某个具体位置。比如：
https://example.com/#section-2
这个 URL 表示跳转到 example.com 网站上的第二个段落。
但是，如果我们在浏览器中查看网络请求，就会发现 URL 中的哈希部分并没有被发送给服务器。那么，为什么哈希部分不在服务器端呢？
哈希部分不包含在 HTTP 请求中
首先要理解的是，当我们在浏览器中输入一个 URL 并回车时，浏览器会向服务器发送一个 HTTP 请求。而这个 HTTP 请求只包含了 URL 的路径和查询字符串部分，而不包含哈希部分。比如：
GET / HTTP/1.1 Host: example.com
这里的 / 就是 URL 的路径部分，而没有包括哈希部分 #section-2。
因此，即使我们在 URL 中加入哈希部分，它也不会被发送到服务器端。
哈希部分用于前端交互
既然哈希部分不会被发送到服务器端，那么它有什么作用呢？
实际上，哈希部分主要用于前端交互。我们可以通过 JavaScript 监听浏览器的 hashchange 事件来响应用户对 URL 中哈希部分的变化，从而实现页面的无刷新局部更新。
比如，我们可以在页面中加入一个导航菜单，点击菜单项后修改 URL 的哈希部分，然后通过监听 hashchange 事件来加载对应的内容，从而实现网站内导航的效果。示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------------
-------
------
-----
----
------ ------------------------- ----------
------ ------------------------- ----------
------ ------------------------- ----------
-----
------
---- -------------------
--------
-------- ------------- -
----- ---- - ---------------------
----- --------- - --------------
----- --------- - -----------------------------------
------------------- - -------------
-------------------------------------------------
-------------- -- ----------------
---------- -- ------------------- - -----
------------ -- ----------------------
-
------------------------------------- -------------
-- ------------ -----------
--------------
---------
-------
-------这个例子中，在页面中加入了一个导航菜单，每个菜单项的链接都包含了一个哈希部分。当用户点击菜单项时，浏览器会自动滚动到对应位置，并且触发 hashchange 事件。我们可以在事件处理函数中通过 AJAX 加载对应的内容并更新页面。
结论
综上所述，URL 中的哈希部分不会被发送到服务器端，主要用于前端交互，可以实现页面的无刷新局部更新效果。在开发前端应用时，需要熟练掌握哈希部分的使用方法，以便实现更加友好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31234
