Javascript 位置路径名导致空白页错误

如标题所示

我有一个网页上有多个页面。该页面最初是一个使用jQuery创建的单页应用程序，然后我将部分内容移动到单独的文件中，并使用jQuery模板插件动态加载它。页面从默认的

路径名开始（'/'），每当内容更改时，URL上的
路径名也将更改

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为，如果单击页面A，则URL为。但是在pageA中，当我刷新页面时，它将返回空白。只有当我将URL重置为时，页面才会正常刷新

有没有办法解决此空白页和路径名问题？是否在加载DOM之前更改了路径名

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

您有两个选择：

也在服务器端实现该页面
使用散列使用客户端路由（例如，有很多库用于此）