前端面试题 - 75. 使用js如何改变url，并且页面不刷新？

History API

可以使用History API来改变URL并且页面不刷新。History API允许您通过JavaScript更改浏览器的历史记录，而不会引起页面刷新。

下面是一个示例：

// 改变URL
window.history.pushState({}, '', '/new-url');

// 监听URL改变事件
window.addEventListener('popstate', function(event) {
  console.log('URL changed: ' + document.location.href);
});

在上述代码中，我们使用window.history.pushState()方法来更改URL，它有三个参数：状态对象、新的URL和标题（可选）。如果你不需要传递状态对象和标题，可以将它们设为null或空字符串。

然后，我们使用window.addEventListener()方法监听popstate事件。每当URL发生变化时，就会触发此事件。在事件处理程序中，你可以执行任何你想要的操作，这里我简单地打印出了新的URL。

请注意，虽然使用History API可以改变URL并且页面不会刷新，但这并不会阻止浏览器去获取新的资源。因此，如果你需要更新页面内容，仍然需要发送请求从服务器获取数据。

location.hash

还有一种更简单的方法可以在不刷新页面的情况下改变URL。这个方法是使用location.hash属性。

location.hash属性表示URL中的锚点（#后面的部分）。它可以用来存储状态信息，而不会引起页面刷新。当你更改location.hash时，浏览器会自动更新URL，但不会重新加载页面。

下面是一个示例：

// 改变URL
location.hash = '#new-url';

// 监听URL改变事件
window.addEventListener('hashchange', function(event) {
  console.log('URL changed: ' + document.location.href);
});

在上述代码中，我们使用location.hash属性来更改URL。然后，我们使用window.addEventListener()方法监听hashchange事件。每当URL中的锚点发生变化时，就会触发此事件。在事件处理程序中，你可以执行任何你想要的操作，这里我简单地打印出了新的URL。

需要注意的是，location.hash只能存储字符串类型的数据，并且它不能超过URL的长度限制（通常为2048个字符）。如果你需要存储更复杂的数据，或者数据量比较大，建议使用History API。