javascript - 后退按钮不适用于简单的 SPA 设置

Question

我为我的 Eleventy 网站设置了一个简单的 SPA：

(function () {
  'use strict';
  var $ = function (sel, con) {
    return (con || document).querySelector(sel);
  };
  var nav = $('.nav');
  if (!nav) {
    console.warn('no navigation found.');
    return;
  }
  nav.addEventListener('click', function (evt) {
    var el = evt.target;
    var spa = el.getAttribute('data-spa');
    if (!!spa) {
      evt.preventDefault();
      var href = el.getAttribute('href');
      var container = $(spa);
      var xhr = new XMLHttpRequest();
      xhr.onload = function () {
        var d = this.responseXML;
        var dTitle = d.title || '';
        var dContainer = $(spa, d);
        container.innerHTML = (dContainer && dContainer.innerHTML) || '';
        history.pushState({}, dTitle, href);
      };
      xhr.open('GET', href);
      xhr.responseType = 'document';
      xhr.send();
    }
  });
})();

但是，当我在浏览器中单击后退按钮时，内容不会改变。任何人都知道我如何实现这一点？

干杯。

标签： javascriptjquerysingle-page-application