history.pushState() 导致浏览器导航

Question

我正在尝试更改页面的URL，而无需将浏览器导航到该页面并导致刷新。在用于操作浏览器历史记录的 MDN 文档中，它声明如下：

假设 http://mozilla.org/foo.html 执行以下 JavaScript：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

这将导致 URL 栏显示 http://mozilla.org/bar.html，但不会导致浏览器加载栏.html甚至检查栏.html是否存在。

这似乎也得到了StackOverflow上的每个人的证实。但是，在我的代码中，window.history.pushState()正在导航页面。控制台甚至非常清楚地指出：

Navigated to http://localhost:8090/?

这是我使用的代码：

attemptLogin(username, password)
.then((result) => {
// navigate to Landing Page
window.history.pushState('data', 'title', '/');
})

我也不确定为什么它要添加一个问号，但它正在浏览浏览器的事实似乎是更紧迫的问题。有没有人可以提供任何见解？

Answer 1

您提供的代码不会造成您所描述的效果。

您以某种方式触发了该代码。您的症状表明它来自诸如单击链接或提交表单之类的事件。

JavaScript正在运行，然后链接或表单提交的正常行为正在发生...这是导致浏览器导航到新的 URL。

您需要阻止该操作的默认行为，例如：

document.querySelector("a").addEventListener("click", handler);
function handler(evt) {
evt.preventDefault();
attemptLogin(username, password)
.then((result) => {
window.history.pushState('data', 'title', '/');
});
}