javascript - 实现History API时如何重新加载页面

Question

我正在尝试使用历史 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 页面。

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