javascript 如何在单页应用程序中使用 #-URLs？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7729580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use #-URLs in a single-page application?
提问by James A. Rosen
This articlemakes a pretty convincing argument that because URLs are long-lived (they get bookmarked and passed around), they should be meaningful, and that using the hash for real routing (determining what data is shown on the page and/or the state of the application) is thus improper. When I try to actually dothat in my single-page application, though, I run up against a problem: how do I render my links so that all browsers can use the application? As I see it, there are three options:
这篇文章提出了一个非常有说服力的论点，因为 URL 是长期存在的（它们被添加书签并被传递），它们应该是有意义的，并且使用散列进行真正的路由（确定页面上显示的数据和/或状态的应用程序）因此是不正确的。但是，当我尝试在我的单页应用程序中实际执行此操作时，我遇到了一个问题：如何呈现我的链接以便所有浏览器都可以使用该应用程序？在我看来，有以下三种选择：
- all
hrefs have a#/prefix. This works great in HTML4 browsers. In HTML5 browsers, I can add a Sammyroute that redirects to the hash-less version, which also works great. There might be a problem with browsers marking links as visited when they're not or not marking them visited when they are. The other problem is that it's... wrong. Anyone who shares a link by right-clicking it and selecting "Copy Link URL" will be sending a working but kludgy URL around. - no
hrefs have a#/prefix. As far as I can tell, HTML4 browsers will have no way of intercepting these link clicks, which means that every one will cause a page refresh. Though the application would probably still function, since I could use Sammy routes to rewrite the hashless versions to hashy ones on page load, the page loads would killthe performance of the single-page application. - I dynamically determine whether to prefix with
#/or not. This means that all of my links have to have dynamic markup and dramatically complicates the application.
- 所有
hrefs 都有一个#/前缀。这在 HTML4 浏览器中非常有效。在 HTML5 浏览器中，我可以添加重定向到无哈希版本的Sammy路由，这也很好用。浏览器在未访问时将链接标记为已访问或在访问时未将其标记为已访问可能存在问题。另一个问题是它……错了。任何通过右键单击链接并选择“复制链接 URL”来共享链接的人都会发送一个有效但混乱的 URL。 - 没有
hrefs 有#/前缀。据我所知，HTML4 浏览器将无法拦截这些链接点击，这意味着每次点击都会导致页面刷新。尽管应用程序可能仍然可以运行，因为我可以在页面加载时使用 Sammy 路由将无哈希版本重写为哈希版本，页面加载会扼杀单页应用程序的性能。 - 我动态确定是否添加前缀
#/。这意味着我的所有链接都必须具有动态标记，这会极大地使应用程序复杂化。
回答by Rene Pot
The hashvalue of a URL never caused and entire re-load of page. Not in HTML4 and before that. A hash value has always been an internal link, and therefore it can be used perfectly (take a look at twitter for example). Of course, when you refresh the page, you will reload the page. But that is obvious.
hash一个 URL的值永远不会引起页面的整个重新加载。不是在 HTML4 和之前。哈希值一直是一个内部链接，因此可以完美地使用它（例如看看twitter）。当然，当您刷新页面时，您将重新加载页面。但这是显而易见的。
With JavaScript you can actually read this hash value (see also this question/answer: How can you check for a #hash in a URL using JavaScript?) using window.location.hash
使用 JavaScript，您实际上可以读取此哈希值（另请参阅此问题/答案：How can you check for a #hash in a URL using JavaScript?）使用window.location.hash
Using a more recent browser, you can also detect a hash change, which is useful if users actually change the URL: On - window.location.hash - Change?
使用更新的浏览器，您还可以检测哈希更改，这在用户实际更改 URL 时很有用：On - window.location.hash - Change?
But when you, as the website, change the URL you don't need read this, you already know because you just changed it.
但是，当您作为网站更改不需要的 URL 时，请阅读本文，您已经知道了，因为您刚刚更改了它。
This way, using hashes, people can exchange the URLs, and you can actually read which URL they are requesting, and therefore it should work perfectly.
这样，使用散列，人们可以交换 URL，您实际上可以读取他们请求的 URL，因此它应该可以完美运行。
