当用户与您的Web应用程序交互时，快速和无缝地更新URL是一个关键的要求。更改浏览器地址栏是一种有效的方式来实现这一目标，但默认情况下，更改URL会导致页面重新加载。本文将介绍如何使用HTML和Javascript更改URL而不刷新页面。
1. 使用history.pushState()
HTML5引入了history API，使得Javascript可以修改历史记录堆栈中的当前条目，并且可以更改浏览器地址栏中显示的URL。通过调用history.pushState()方法，可以将新URL添加到历史记录堆栈中，同时更新浏览器地址栏。以下是示例代码：
----------------------- ----- ------------
pushState()方法接受三个参数：
- 状态对象（null表示没有状态）
- 页面标题（在大多数浏览器中被忽略）
- 新URL
此方法将更新浏览器地址栏而不刷新页面。但是需要注意的是，它不会阻止对服务器的请求，因此需要合理处理路由以确保用户进入预期的页面。
2. 监听popstate事件
当用户点击“后退”或“前进”按钮时，会触发popstate事件。为了支持回退功能，可以监听该事件并根据历史记录堆栈中的当前URL执行相关操作。以下是示例代码：
----------------------------------- --------------- - -- ---------- ---
3. 使用location.hash
除了使用pushState()方法之外，还可以使用location.hash属性来更改URL并避免页面重新加载。hash值是URL中#符号后面的部分。通过修改它，可以将新状态添加到浏览器历史记录中，同时不刷新页面。以下是示例代码：
------------- - ------------
要监听hash变化事件，可以添加以下代码：
------------------------------------- ---------- - -- ---------- ---
结论
通过使用history API和location.hash属性，可以在不刷新页面的情况下更改浏览器地址栏中显示的URL。这种技术可以让您的Web应用程序更快地响应用户输入，并提高用户体验。但是需要注意的是，必须检查并处理路由以确保用户进入预期的页面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27022