實施History API時如何重新加載頁面

Question

我試圖使用History API允許我在動態加載內容時使用后退和前進按鈕。 這是我正在使用的代碼，以及我正在使用的狀態對象的示例。

我如何使用狀態對象和pushstate()

  var stateObj = {Content : homeSection.innerHTML, "Product" : detail.Name, Title : title.innerHTML, Section:"dynamicArticle"};
  window.history.pushState(stateObj, "", detailName);

  window.addEventListener('popstate', function(event) {
    updateContent(event.state);
  });

使用的功能：

function updateContent(stateObject) {
  if (stateObject){
    homeSection = document.getElementById(stateObject.Section);
    homeSection.innerHTML = stateObject.Content;
    title.innerHTML = stateObject.Title;

    var items = document.querySelectorAll(".homeItem");
    if(items){
      for(i=0; i<items.length; i++){
        items[i].addEventListener("click", selectedProduct);
      }
    }

    checkoutButton = document.getElementById('checkoutButton');
    if(checkoutButton){
      checkoutButton.addEventListener('click', function(){
          displayCheckout();
        });
    }

    basketButton = document.getElementById("basketButton");
    quantityInput = document.getElementById("productQuantity");
    if(basketButton){
      basketButton.addEventListener('click', clicked);
      basketButton.addEventListener('click', updateBasketNumber);
      quantityInput.value = "1";
    }

    searchSort = document.getElementById("sort");
    if(searchSort){
      var items = document.querySelectorAll(".searchResult");
      for(i=0; i<items.length; i++){
        items[i].addEventListener("click", selectedProduct);
      }

      searchSort.addEventListener("change", function(){
        sort = searchSort.value;
        searchItem(e, sort);
      });
    }
  }
  else{
    return;
  }
}

我正在苦苦掙扎的是，如果我使用pushState()導航到其中一個頁面，然后嘗試重新加載該頁面，因為您希望找不到該頁面。

我在問是否有一種方法可以允許重新加載，或者有人可以導航到該URL而不會產生錯誤，並提供正確的內容

Answer 1

就像@ jon-koops在注釋中指出的一樣，您需要配置服務器以將請求重定向到所有鏈接分支到的同一頁面。

如果您使用的是Apache 2.2.16+它將變得非常簡單：

FallbackResource /index.html

這會將所有URL重寫為單個入口點，即index.html頁面。

其他解決方案取決於您正在運行的服務器。