HTML 如何在不刷新页面的情况下修改URL
在本文中，我们将介绍如何在HTML中修改URL，而无需刷新整个页面。通常情况下，当我们在浏览器中输入URL并回车，浏览器会请求服务器返回相应的HTML页面并重新加载整个页面。然而，在某些情况下，我们希望通过JavaScript来动态地修改URL，而不影响整个页面的刷新。接下来，我们将讨论几种方法来实现这一目标。
阅读更多：HTML 教程
使用window.history.pushState()方法
window.history.pushState()方法是HTML5中提供的一种方式，可以修改URL而不刷新整个页面。该方法接受三个参数，分别是state对象、新的标题和新的URL。
在上面的示例中，当我们点击按钮时，页面的URL将会由原来的URL变为”new-page.html”，同时浏览器地址栏也会相应地更新成新的URL，但页面不会重新加载。
使用window.location.replace()方法
window.location.replace()方法是另一种在不刷新页面的情况下修改URL的方法。与window.history.pushState()方法不同，该方法会替换当前页面的URL，并使用新的URL加载新的页面。
在上述示例中，当我们点击按钮时，页面的URL将会由原来的URL替换成”new-page.html”，并且浏览器地址栏也会相应地更新，同时页面也会加载新的页面内容。
使用URL参数传递数据
除了直接修改URL，我们还可以使用URL参数传递数据。URL参数是包含在URL中的字符串，使用问号(?)和参数列表的键值对表示。例如，http://example.com?name=John&age=20就是一个包含两个参数的URL。
在JavaScript中，我们可以使用URLSearchParams对象来获取和修改URL中的参数。下面是一个例子：
在上述示例中，当我们点击按钮时，URL参数name将被修改为”John”，age将被修改为20。页面的URL将会更新，并且浏览器地址栏中的URL也会相应地变化。
使用hash来修改URL
URL中的hash是指URL中#符号后面的部分。我们可以通过修改hash值，来实现不刷新页面而改变URL的效果。
在上述示例中，当我们点击按钮时，URL的hash值将会由原来的值替换成”new-hash”，并且浏览器地址栏中的URL也会相应地更新。
总结
通过使用window.history.pushState()方法、window.location.replace()方法、URL参数和hash的方式，我们可以在HTML中实现修改URL而不刷新整个页面的效果。这些方法可以用于构建单页应用、动态加载内容以及改善用户体验。通过合理利用这些技术，我们可以在不影响页面加载和刷新的情况下，实现对URL的灵活控制。