在前端开发中，我们经常需要处理 URL。URL 片段（fragment）是 URL 的一部分，通常用于定位文档的特定部分，例如页内锚点。有时候，我们需要从 URL 中移除片段，但又不想重新加载页面。本文将介绍如何使用 JavaScript 实现这一功能。
获取和修改 URL 片段
在 JavaScript 中，我们可以通过 window.location 对象获取当前页面的 URL。其中，location.hash 属性返回 URL 中的片段，以 # 字符作为前缀。例如，如果当前 URL 为 https://example.com/page#section1，则 location.hash 返回 #section1。
要修改 URL 中的片段，我们可以将新片段赋值给 location.hash 属性。例如，执行以下代码将 URL 片段从 #section1 改为 #section2：
------------- - ------------
这么做会导致浏览器重新加载页面并滚动到新片段所在的位置。如果我们只想移除片段而不重新加载页面，该怎么办呢？
阻止默认行为
其实，在上面的代码中，重新加载页面和滚动到新片段所在的位置是由浏览器的默认行为决定的。如果我们阻止了默认行为，就可以达到不刷新页面而修改 URL 片段的效果。
具体来说，我们需要在执行修改 URL 片段的代码之前，使用 event.preventDefault() 方法阻止浏览器跳转到新片段所在的位置。例如，以下代码会将当前 URL 中的片段移除：
------------------------------------- --------------- - ----------------------- -------------------------- --- ------------------------ - ------------------------ ---
这里使用了 hashchange 事件，该事件会在 URL 的片段发生变化时被触发。当事件被触发时，我们阻止了浏览器的默认行为，并使用 history.replaceState() 方法将 URL 的路径和查询部分设置为当前路径和查询部分，从而移除了 URL 中的片段。
示例代码
以下是一个完整的示例代码，演示如何通过 JavaScript 移除 URL 中的片段，无需重新加载页面：
--------- -----
------
------
------------- -------- -- --- ---- ------------------
----- ----------------
-------
------
---------- -------- -- --- ---- ---------------
------- -- - ---- ---------
----
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
--------
-- ------ ---- ---- -------- -- -----
----------------------------------------------------- -
------------------------------ --------------- -
-----------------------
-------------------------- --- -----------
---
---
-- ------ ---- -- ---- ----
------------------------------- ---------- -
-- --------------- -
-------------------------- --- ------------------------ - ------------------------
-
---
-- ------ ---- -- ----------
------------------------------------- --------------- -
-----------------------
-------------------------- --- ------------------------ - ------------------------
---
---------
-------
-------在上面的代码中，我们在页面加载和 URL 发生变化时都执行了移除片段的操作。具体来说，我们使用了以下技术：
document.querySelectorAll()方法选取所有链接，并使用forEach()方法为每个链接添加点击事件处理程序；- 在点击链接时，我们阻止了默认行为并使用
history.replaceState()方法修改了 URL； - 在页面加载时，如果 URL 中存在片段，我们直接将路径和查询部分设置为当前路径和查询
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25953