如何在单页面应用程序中使用＃-URL？ [英] How can I use #-URLs in a single-page application?

问题描述

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

This article makes 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 do that 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:

1. 所有 href s有一个＃/ 前缀。这在HTML4浏览器中非常有用。在HTML5浏览器中，我可以添加一个 Sammy 路由，该路由重定向到无哈希版本，这也很有用。浏览器将链接标记为已访问时可能存在问题，如果链接未标记或未标记为已访问过。另一个问题是它错了。通过右键单击链接并选择复制链接URL来共享链接的任何人都将发送一个有效且有问题的URL。


2. no href s有一个＃/ 前缀。据我所知，HTML4浏览器无法拦截这些链接点击，这意味着每个浏览器都会导致页面刷新。虽然应用程序可能仍然可以运行，但由于我可以使用Sammy路由在页面加载时将无散列版本重写为hashy，因此页面加载将 kill 单页应用程序的性能。


3. 我动态确定是否以＃/ 作为前缀。这意味着我的所有链接都必须具有动态标记，并使应用程序大大复杂化。

1. all hrefs have a #/ prefix. This works great in HTML4 browsers. In HTML5 browsers, I can add a Sammy route 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.
2. 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 kill the performance of the single-page application.
3. 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.

推荐答案

从未导致URL的散列值并完全重新加载页面。不是在HTML4之前和之前。哈希值一直是内部链接，因此它可以完美地使用（例如，看看twitter）。当然，刷新页面时，您将重新加载页面。但这很明显。

The hash value 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.

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

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

使用更新的浏览器，您还可以检测到散列更改，如果用户实际更改了URL： On - 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时，你已经知道了，因为你刚刚改变了它。

But when you, as the website, change the URL you don't need read this, you already know because you just changed it.

这样，使用哈希，人们可以交换URL，你实际上可以读取他们请求的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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！