javascript - 由于位置路径名导致的空白页错误

Question

如题，

我有一个包含多个页面的网页。该页面最初是使用 jQuery 创建的单页应用程序，然后我将一些内容移动到单独的文件中，并使用 jQuery 模板插件动态加载它。该页面从默认的 pathname ('/') 开始，每当内容更改时，URL 上的 pathname 也会更改。

function goTo(page){
    // Changing URL without reloading the page (to allow changing the URL 
   //state without changing the page)
    if (page !== 'main'){
        console.log("Yes it is not main!");
        window.history.pushState("", "", "/"+page);
    } else {
        console.log("Yes it is main!");
        window.history.pushState("", "", "/");
    }

    // Set page template
    $('#main').loadTemplate('pages/'+page+'.html');
}

以上是每当用户单击链接时我用来更改 URL 和内容的方法。

我遇到的问题是，每当我在 URL 上有路径名时刷新页面，页面将返回 404 错误(未找到)并且它会返回一个未知的空白 html 页面，该页面完全是空的(没有已加载 CSS 和脚本)。

例如，主页 URL 为 http://localhost:8000 ，如果我点击页面 A，则 URL 变为 http://localhost:8000/pageA .但是在 pageA 中，当我刷新页面时，它将返回空白。仅当我将 URL 重置为 http://localhost:8000 时然后页面会正常刷新。

有没有办法解决这个空白页和路径名问题？喜欢在 DOM 加载之前更改 pathname 吗？

谢谢

Answer 1

使用 window.history.pushState 您将替换浏览器位置，并通过点击页面刷新向服务器发送请求，并要求提供名称在该位置的页面酒吧。但是，该页面在服务器上不存在，因此服务器以“未找到”作为回答，这是正确的行为。

你有两个选择:

1. 也在服务器端实现页面
2. 使用使用哈希的客户端路由(有很多库，例如 http://projects.jga.me/routie/ )