Window.history API - 404 因为我在 URL /

Question

我正在学习使用window.history.pushState。

我有三个link：

 <a href="/">Home</a>
 <a href="/skills">Skills</a>
 <a href="/experiences">Experiences</a>

这是我的代码：

(function() {
function loadHtml(url, cb) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            cb(this.responseText);
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

function setHrefEvents() {
    var links = document.getElementsByClassName('menu')[0].getElementsByTagName('li');

    for (i = 0; i < links.length; i++) {
        links[i].getElementsByTagName('a')[0].addEventListener('click', function(e) {
            e.preventDefault();
            window.history.pushState({
                    urlPath: 'views/' + (e.target.pathname.match(/\/([a-z]*)/)[1] || 'home') + '.html'
                },
                e.target.pathname.match(/\/([a-z]*)/)[1], e.target.pathname);
            loadHtml(window.history.state.urlPath, function(html) {
                document.getElementsByTagName('main')[0].innerHTML = html;
            });
        });
    }
}

function setUrl() {
    window.history.pushState({
        urlPath: 'views/' + (window.location.pathname === '/' ? 'home' : window.location.pathname) + '.html'
    }, 'Title', window.location.pathname);
    loadHtml(window.history.state.urlPath, function(html) {
        document.getElementsByTagName('main')[0].innerHTML = html;
    });
    return;
}

function setFooter() {
    document.getElementsByClassName('footer-date')[0].innerHTML = new Date().getFullYear();
}

setFooter();
setUrl();
setHrefEvents();
})();

当我点击 link 时，历史状态被很好地推送并且我的内容被正确加载。但是，例如，当我在 localhost/skills 上重新加载页面时，我有 404.

我的问题是，我怎样才能避免 404 localhost/skills？

我不知道它是否有帮助，但我运行我的网站在 nginx 服务器上。显然我错过了一些东西，我不知道是什么。

感谢您的帮助！

Answer 1

我找到了我的解决方案！

这是关于我的网络服务器的配置。

此处：https://gist.github.com/aotimme/5006831

这是 nginx + JavaScript 历史记录 API 的工作配置。

希望对您有所帮助！

Window.history API - 404 因为我在 URL /

Window.history API - 404 Because I am on URL /

html

javascript

nginx

html5-history