title: How can I use #-URLs in a single-page application?
body: <p><a href="http://danwebb.net/2011/5/28/it-is-about-the-hashbangs" rel="noreferrer">This article</a> 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 <em>do</em> 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:</p>
  
  <ol>
  <li>all <code>href</code>s have a <code>#/</code> prefix. This works great in HTML4 browsers. In HTML5 browsers, I can add a <a href="http://sammyjs.org/" rel="noreferrer">Sammy</a> 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.</li>
  <li>no <code>href</code>s have a <code>#/</code> 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 <strong>kill</strong> the performance of the single-page application.</li>
  <li>I dynamically determine whether to prefix with <code>#/</code> or not. This means that all of my links have to have dynamic markup and dramatically complicates the application.</li>
  </ol>