Question

标题为

我的网页上有多个网页。该页面最初是使用jQuery创建的单页面应用程序，然后我将一些内容移动到单独的文件中，并使用jQuery模板插件动态加载它。该网页以默认pathname（＆＃39; /＆＃39;）开始，每当内容发生变化时，网址上的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上有路径名，页面将返回404错误（未找到），它将返回一个完全为空的未知空白html页面（否加载css和脚本）。

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

有没有办法解决这个空白页面和pathname问题？就像在DOM加载之前更改pathname一样？

由于

Answer 1

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

您有两种选择：

同样在服务器端实施该页面
使用哈希使用客户端路由（有很多库，例如http://projects.jga.me/routie/）

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

1 个答案: