Preferred client side routing solution?

I am designing a one page browser based web application.

JQuery is already being used in my application. I am currently planning to use KnockoutJS for data-binding and UI management. However I have used Backbone.js in past, and I have been quite impressed with the routing facilities provided by the controller layer.

I have also looked into some JQuery-based solution like pathjs for client side routing.

It would be great if someone could offer suggestions and guidelines for choosing a proper routing system.

I am not willing to use Backbone.js instead of KnockoutJS because of the excellent data-binding facilities of KnockoutJS.

After going through a bit of exploration I have found the solution. @Eisenhauer Backbone's routing facilities are awesome, but what if I am not using Backbone. As I outlined in my question, I am already using KnockoutJS that provides me a client side MVVM model and so its not really a good idea to put an additional MVC implementation in the same page.

For people looking for a standalone routing solution, pathjs is a simple and elegant solution.

A more flexible, powerful and standalone routing solution is Crossroads.js available at http://millermedeiros.github.com/crossroads.js/. It is very nicely documented and really powerful,so can be adapted to any set of requirements.

You could use the History API rather than a hashbang approach?

• It allows you to manipulate the URL displayed to the user.
• It means that back / forward work sensibly.
• Bookmarking the page works sensibly.
• It's better in terms of performance, because if the user refreshes a page (or hits a link to the page from an external source) the correct content is loaded first time rather than having to load a blank page and then grab the correct content via AJAX.

The downside is that older browsers will not support it. You could fall back on a hashbang approach (if you really have to). I don't know of any existing frameworks that do this though. I would prefer to fall back on not dynamically loading content (i.e. full page reloads when the user clicks a link). The history API will become more and more widely supported, so this "problem" will reduce over time.

Here's a working example with some documentation. From the address bar, it looks like pages are loading "old school" (full page refresh) but if you take a look at the console (Firebug, Chrome dev tools), you can see that the content is being grabbed via an AJAX request.

Mozilla has some docs about it.

Also there is excellent Director

Crossroads.js seems to be one of the best around. One major advantage of it being, it doesn't rely on window.location for routing. It's lightweight as it sticks to do just routing and routing alone.

Others you may want to try: finch.js, davisjs (based on pushState so that you can use existing links as a fallback if JS fails)

Appending an update: March 30 2015 - I had moved to AngularJS late last year. Hands-down the best switch form JQ, has a lot of modules like routing in-built.