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

Question

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

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

Answer 1

hashURL 的值永远不会导致页面的整个重新加载.不是在HTML4之前和之前.哈希值一直是内部链接,因此它可以被完美地使用(例如,看看twitter).当然,刷新页面时,您将重新加载页面.但这很明显.

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

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

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

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