我正在创建一个“静态”网站，我希望有这样的网址:
http://www.my-website/my-page-1 或 http://www.my-website/my-page-2
我使用jQuery方法load()加载我的网页内容。 这是我的index.html:
<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>
我知道如何更改我的网址而不重新加载页面，使用 history API
这是我的 JavaScript :
function 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');
}
使用此代码，我可以通过点击 Link 2 访问 http://www.my-website/my-page-2，但是如果我刷新我的网页，或者如果我直接在浏览器地址栏中输入 http://www.my-website/my-page-2，我会收到 404 错误。
我对 .htaccess URL 重写不太满意，但我认为它应该可以解决我的问题。
我不想使用 AngularJS 或其他类似的框架(除非它是一个非常轻量级的框架)
最佳答案
您需要确保当您使用 JavaScript 时:
- 修改当前页面的 DOM，使其实际上成为不同的页面
- 更改网址以标识不同的页面
…您还确保服务器也可以自行生成该页面。
这样如果 JavaScript fails for any reason那么一切仍然有效。这是basic principle应该遵循最佳实践。
这可能会涉及复制逻辑服务器端，这可能需要大量工作。鲁棒性+客户端性能黑客不能廉价地协同工作。考虑isomorphic JS和 taking page snapshots with a headless browser作为加速这一过程的技术。
I'm not very comfortable with .htaccess URL rewritting but I think it should solve my problem.
它肯定不能很好地解决这个问题。。您可以使用它将每个请求转移回您的主页(因此每个 URL 上都有重复的内容)，然后使用客户端 JS 读取 location 并计算出要加载的内容，但您可能会这样做好好利用hashbangs因为您将放弃使用 pushState 的所有优势，而是向您的网站添加重复的内容 URL(并投入大量工作来创建这些重复的内容 URL)。
关于javascript - 静态网站的漂亮 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38205473/