浏览器 JavaScript 更新 URL 而不更改历史记录 - JavaScript

当在浏览器中进行导航时，通常会在浏览器的历史记录中创建一个新的条目。这可用于返回按钮或前进按钮中的导航，并允许用户在历史记录中回到以前的页面。然而，有时我们可能希望更新 URL 而不更改历史记录。这可以用于一些类似于单页应用程序的场景，然后我们可以使用 JavaScript 来管理导航。

实现方式

我们可以使用 window.history.replaceState() 方法来实现更新 URL 而不更改浏览器的历史记录。这个方法接受三个参数：

window.history.replaceState(stateObject, title, newURL);

• stateObject: 可以是一个对象，表示新的历史状态。
• title: 页面的新标题（不是必须的）。
• newURL: 新的 URL。

以下是一个使用 history.replaceState() 方法的示例：

// 更改 URL 并将状态对象传递给历史记录
const newState = { page: 'about' };
const newURL = '/about';
window.history.replaceState(newState, null, newURL);

上述代码将更新浏览器的 URL 为 /about，并使用 newState 对象设置新的历史状态对象。不过需要注意的是如果新的 URL 与当前页面的 URL 不同，浏览器将加载新的页面。在这种情况下，新的状态对象将被忽略。

状态管理

当我们更改 URL 时，我们可以选择是否将状态信息包含在新的 URL 中。如果我们选择不包含状态信息，那么使用 location.search 和 location.hash 属性可以在 URL 中记录信息。

// 新的 URL，包含查询字符串参数和哈希片段
const newURL = '/about?page=2#section2'
window.history.replaceState(null, null, newURL);

// 从 URL 中检索参数和哈希
const params = new URLSearchParams(window.location.search);
const section = window.location.hash.substr(1);
console.log(params.get('page')); // '2'
console.log(section); // 'section2'

总结

可以使用 window.history.replaceState() 方法来更新浏览器的 URL。这可以用于更新 URL 路径、查询字符串参数和哈希部分，而不会在历史记录中创建新的条目。当需要使用状态对象时，可以将它们传递给 replaceState() 方法。