javascript - 使用 javascript 添加 SPA 功能

Question

我在我的 Eleventy 站点中使用以下内容来全面添加简单的 SPA 功能。

  (function () {
    'use strict';
    var $ = function (sel, con) {
      return (con || document).querySelector(sel);
    };
    var nav = document.querySelector("#navbar");
    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 = document.querySelector(spa);
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
          var d = this.responseXML;
          var dTitle = d.title || '';
          var dContainer = document.querySelector(spa, d);
          container.innerHTML = (dContainer && dContainer.innerHTML) || '';
          history.pushState({}, dTitle, href);
        };
        xhr.open('GET', href);
        xhr.responseType = 'document';
        xhr.send();
      }
    });
  })();

这应该如何工作是navbar不会在链接点击时重新加载但是由于某种原因这不起作用。

希望能得到一些帮助。

干杯。