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

How can I use #-URLs in a single-page application?

本文关键字：#-URL 应用程序 单页      更新时间：2023-09-26

这篇文章提出了一个非常有说服力的论点，即由于URL是长寿命的(它们被标记为书签并被传递(，所以它们应该是有意义的，因此使用哈希进行真正的路由(确定页面上显示的数据和/或应用程序的状态(是不合适的。然而，当我试图在我的单页应用程序中真正这样做时，我遇到了一个问题：如何呈现我的链接，以便所有浏览器都可以使用该应用程序？在我看来，有三种选择：

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

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

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

使用更新的浏览器，你还可以检测到哈希变化，如果用户真的改变了URL，这很有用：On-window.location.hash-change？

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

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

相关文章：