I went to a local MeetUp on Single Page Applications using Aurelia and TypeScript. As I sat there soaking up this sweet framework, I was wondering about the hashes (#) in the URL of the demo application. There is nothing wrong with hashes besides being an unfamiliar nuisance to the uninitiated user looking at the funny characters in the not so pretty URL. I still wanted to eradicate them.

Drama

Actually, there was a big fuss over URL hashes when Twitter and Facebook popularized their use and Google decided to index hashed URLs. There was a popular theme going on how hash bang breaks RFC 3986 and other “stop hacking my URLs” nonsense, but the hashes worked then and are still here today.

Solutions

HTML 5 offered up a solution to get rid of them, but older browsers aren’t HTML 5 compliant. Older browser these days is code word for IE9 and older.

Some benefits of not using hash routing are

• Future proofing SEO, Google deprecated hash URLs because of the HTML 5 standard.
• Isomorphic applications and server side rendering, hash only work with JavaScript in client side routing.

Yet, there is some weird comfort in knowing that I have the power to ditch the hash in my single page applications if I want to.

In some routing modules you get to choose between hash and pushstate routing. Hash routing uses window.location.hash. Pushstate uses the new History API in HTML 5, history.pushstate. I figured there has to be something similar in Aurelia, right?

Even though it will kill some IE browsers, I still want to know how to do pushstate in Aurelia, what if I don’t care about older browsers. After a little digging on the Aurelia GitHub repos, I found issue #16 and #225 on router and issue #21 on history-browser that seems to address this very thing. Now that I was so dirty after all of that digging, I also went the sensible developer route and just checked the documentation, it has a section on Configuring PushState. So, it seems setting pushState to true turns pushState on (duh) and I’m still not sure about what hashChange does.

I know this is bad form for a blog post, but I haven’t tried this. I am assuming that router can be configured by setting options for pushState and hashChange based on the research above.

So, I am posing this as something for me to try or for someone to help me set it right.

configureRouter(config) {
config.title = 'Hello World';
config.options.pushState = true;
config.options.hashChange = false;
   ...
}

There You Go

So, you seem to have options for Pretty URLs in Aurelia.