Question

我试图更改页面的URL，而不将浏览器导航到该页面并引起刷新。在MDN documentation for manipulating the browser history中，其内容如下：

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

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

这将导致URL栏显示http://mozilla.org/bar.html，但不会导致浏览器加载bar.html甚至检查bar.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', '/');
        });
}

history.pushState（）导致浏览器导航

1 个答案: