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

Question

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

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

Answer 1

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

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

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

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

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

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