Javascript 静态网站的漂亮URL
我正在创建一个“静态”网站，我希望有如下url：Javascript 静态网站的漂亮URL,javascript,html,.htaccess,url,url-rewriting,Javascript,Html,.htaccess,Url,Url Rewriting,我正在创建一个“静态”网站，我希望有如下url： http://www.my-website/my-page-1或http://www.my-website/my-page-2 我使用jQuery方法加载我的网页内容。 这是我的index.html： <body> <nav> <ul > <li id="my-page-1-menu-item" class="menu-item" onclick="chan
http://www.my-website/my-page-1http://www.my-website/my-page-2<body>
<nav>
<ul >
<li id="my-page-1-menu-item" class="menu-item" onclick="changeState('my-page-1')">
<span><a>Link 1</a></span>
</li>
<li id="my-page-2-menu-item" class="menu-item" onclick="changeState('my-page-2')">
<span><a>Link 2</a></span>
</li>
</ul>
</nav>
<!-- Content, loaded with $.load() -->
<div id="content"></div>
</body>
http://www.my-website/my-page-2链接2http://www.my-website/my-page-2我不想使用AngularJS或其他类似的框架（除非它是一个真正的轻量级框架）如果不进行任何服务器端重写，那么这样做听起来是不可能的。刷新页面时，HTTP服务器需要根据URL为您提供适当文件的内容 但是。。如果您真的想在客户端进行URL重写，您可以进行一次通用重写，就像基于PHP的网站在内部进行重写一样（不是通过.htaccess或nginx规则，而是使用PHP脚本）。
当Web服务器上没有像“/my-page-2”这样的文件时，只需将客户端重定向到/index.html？url=/my-page-2，并使用JavaScript将其发送到适当的子页面。如果不进行任何服务器端重写，这样做似乎是不可能的。刷新页面时，HTTP服务器需要根据URL为您提供适当文件的内容 但是。。如果您真的想在客户端进行URL重写，您可以进行一次通用重写，就像基于PHP的网站在内部进行重写一样（不是通过.htaccess或nginx规则，而是使用PHP脚本）。
当Web服务器上没有像“/my-page-2”这样的文件时，只需将客户端重定向到/index.html？url=/my-page-2，并使用JavaScript发送到适当的子页面。您需要确保在使用JavaScript时：
- 修改当前页面的DOM，使其实际上是一个不同的页面
- 更改URL以标识不同的页面
这肯定解决不了问题。您可以使用它将每个请求转移回您的主页（因此您在每个URL上都有重复的内容）然后使用客户端JS来读取
位置pushState- 修改当前页面的DOM，使其实际上是一个不同的页面
- 更改URL以标识不同的页面
这肯定解决不了问题。您可以使用它将每个请求转移回您的主页（因此您在每个URL上都有重复的内容）然后使用客户端JS来读取
位置pushStatefunction changeState(url) {
window.history.pushState(url, 'Title', url);
loadStateData(url);
}
function loadStateData(state) {
var content = '#content';
$(content).load( 'views/' + state + '.html');
// Manage menu style
$('.menu-item').removeClass('active');
$('#' + state + '-menu-item').addClass('active');
}