如何在单页应用程序中使用 #-URLs?

14

这篇文章提出了一个令人信服的观点:由于URL是长期存在的(会被收藏和传播),因此它们应该具有可读性,使用哈希符号来进行实际路由(确定页面上显示的数据和/或应用程序的状态)是不正确的。但当我尝试在我的单页应用程序中实现这一点时,却遇到了一个问题:如何呈现我的链接,以便所有浏览器都可以使用应用程序?我认为有三个选择:

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

我很好奇你决定采用什么解决方案(我只是忽略了HTML5路由,而是在所有地方使用哈希标记。这很简单,大多数人也不在意)。 - maaartinus
1个回答

11

URL的hash值从未导致整个页面重新加载,HTML4及其之前也不会如此。Hash值一直是内部链接,因此可以完美使用(例如Twitter)。当然,当您刷新页面时,会重新加载页面。但这是显而易见的。

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

在较新的浏览器中,还可以检测哈希更改,如果用户实际上更改了URL,则非常有用:关于-window.location.hash-更改?

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

这样,使用哈希,人们可以交换URL,并且您实际上可以读取他们请求的哪个URL,因此应该可以完美运行。


那么您不同意问题的前提吗?如果在URL中使用哈希,这在技术上是很容易实现的。我的问题更多地是关于如何避免使用它,因为我认为这是一个丑陋的解决方法。 - James A. Rosen
2
是的,实际上我是这么认为的。如果你想让人们在单页应用程序中分享链接,你应该使用它。 - Rene Pot

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接