如何在单页面应用程序中使用＃-URL？

Question

本文提出了一个非常有说服力的论点，因为URL是长期存在的（它们被加入书签并传递），它们应该是有意义的，并且使用哈希进行实际路由（确定页面上显示的数据和/或状态）因此，不适当的。 当我尝试在我的单页应用程序中实际执行此操作时，我遇到了一个问题：如何渲染我的链接以便所有浏览器都可以使用该应用程序？ 我认为，有三种选择：

1. 所有href都有一个#/前缀。 这在HTML4浏览器中非常有用。 在HTML5浏览器中，我可以添加一个重定向到无哈希版本的Sammy路由，这也很有用。 浏览器将链接标记为已访问时可能存在问题，因为它们不是标记或未标记它们。 另一个问题是它错了。 通过右键单击并选择“复制链接URL”来共享链接的任何人都将发送一个工作但很糟糕的URL。
2. 没有href s有#/前缀。 据我所知，HTML4浏览器无法拦截这些链接点击，这意味着每个浏览器都会导致页面刷新。 虽然应用程序可能会仍然起作用，因为我可以用萨米路线改写hashless版本hashy在页面加载的，页面加载会杀了单页面应用程序的性能。
3. 我动态地确定是否以#/作为前缀。 这意味着我的所有链接都必须具有动态标记，并使应用程序大大复杂化。

Answer 1

URL的hash值从未导致并且整个页面重新加载。 不是在HTML4之前和之前。 哈希值一直是内部链接，因此它可以被完美地使用（例如，看看twitter）。 当然，刷新页面时，您将重新加载页面。 但这很明显。

使用JavaScript，您实际上可以使用window.location.hash读取此哈希值（另请参阅此问题/答案： 如何使用JavaScript检查URL中的#hash？ ）

使用更新的浏览器，您还可以检测哈希更改，这在用户实际更改URL时非常有用： On - window.location.hash - 更改？

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

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