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 ，但不會導致瀏覽器加載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', '/');
        });
}