实施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页面。

其他解决方案取决于您正在运行的服务器。