javascript - 如何在单页应用程序中使用#-URL？

Question

This article提出了一个非常有说服力的论点，因为 URL 是长期存在的(它们被添加为书签并被传递)，它们应该是有意义的，并且使用哈希进行真正的路由(确定页面上显示的数据和/或页面的状态)应用)因此是不合适的。但是，当我尝试在我的单页应用程序中实际做时，我遇到了一个问题:如何呈现我的链接以便所有浏览器都可以使用该应用程序？在我看来，有以下三种选择:

1. 所有href 都有一个#/ 前缀。这在 HTML4 浏览器中效果很好。在 HTML5 浏览器中，我可以添加 Sammy重定向到无哈希版本的路由，这也很好用。浏览器在链接未访问时将其标记为已访问或在链接已访问时未将其标记为已访问可能存在问题。另一个问题是它是……错误的。任何通过右键单击链接并选择“复制链接 URL”来共享链接的人都将发送一个有效但笨拙的 URL。
2. href 没有#/ 前缀。据我所知，HTML4 浏览器无法拦截这些链接点击，这意味着每一次点击都会导致页面刷新。尽管该应用程序可能仍然可以运行，但由于我可以使用 Sammy 路由在页面加载时将无哈希版本重写为哈希版本，因此页面加载会杀死单页应用程序的性能。
3. 我动态确定是否使用 #/ 作为前缀。这意味着我的所有链接都必须具有动态标记，这会使应用程序变得非常复杂。

Answer 1

URL 的 hash 值永远不会导致整个页面重新加载。不在 HTML4 和之前。哈希值一直是一个内部链接，因此可以完美地使用它(例如看看推特)。当然，当你刷新页面时，你会重新加载页面。但这是显而易见的。

使用 JavaScript，您实际上可以使用 window.location.hash

读取此哈希值(另请参阅此问题/答案: How can you check for a #hash in a URL using JavaScript?)

使用较新的浏览器，您还可以检测哈希更改，这在用户实际更改 URL 时很有用:On - window.location.hash - Change?

但是，当您作为网站更改 URL 时，您不需要阅读此内容，您已经知道了，因为您刚刚更改了它。

这样，人们可以使用散列来交换 URL，并且您可以实际读取他们请求的 URL，因此它应该可以完美地工作。