Question

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

我有三个链接：

 <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();
})();

当我点击某个链接时，状态状态会被很好地推送，我的内容会正确加载。但是当我在localhost/skills上重新加载页面时，我有404。

我的问题是，如何设法没有404 localhost/skills？

我不知道它是否可以提供帮助，但我在nginx服务器上运行我的网站。我忽略了一些令人遗憾的事情，我不知道是什么。

感谢您的帮助！

Answer 1

我找到了解决办法！

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

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

这是nginx + JavaScript History API的工作配置。

希望它会有所帮助！

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

1 个答案: