JQuery Routing Plugin

JQuery router is a web routing plugin created to support single page applications.

Installation

npm install jqueryrouter

How to use?

1. Create routes:

$.route('/path/to/route1', function () { ... });
$.route('/path/to/route2', function () { ... });
$.route('/path/to/route3', function () { ... });

2. Trigger a route by calling $.router.set

$.router.set('/path/to/route1');

The method changes current route and call the appropriate method that matches it.

3. Execute routes on page load. Call router's init method for that magic:

$.router.init();

The method execute handler methods that matches the current route (without $.router.set). Alternatively, you can call $.router.set(location.pathname); on DOM ready.

$(function () {
    ...
    $.router.set(location.pathname);
});

4. Pass data to route handler:

$.router.set({
    route: '/path/to/route',
    data: {
        key1: 'value1',
        key2: 'value2'
    }
});
...
$.route('/path/to/route', function (data) {
    console.log(data.key1); // 'value1'
    console.log(data.key2); // 'value2'
});

5. Set route parameters:

$.router.set('/path/to/route/hello/world');
...
$.route('/path/to/route/:param1/:param2', function (data, params) {
    console.log(params.param1); // hello
    console.log(params.param2); // world
});

6. Set query parameters:

$.router.set({
    route: '/path/to/route',
    queryString: 'q=123&s=helloworld'
});
...
$.route('/path/to/route', function (data, params, query) {
    console.log(query.q); // 123
    console.log(query.s); // 'helloworld'
});

7. Change current page path without updating history:

var replaceMode = true;
$.router.set('/path/to/route', replaceMode);

8. Change current page path without calling handler function:

...
var doNotCallHandler = true;
$.router.set('/path/to/route', replaceMode, doNotCallHandler);

9. Set # routes:

$.router.set('#/path/to/route');
...
$.route('/path/to/route', function () {
    console.log('Still works');
});

This forces plugin to change URL hash instead of pathname.

Browser support

Jquery router supports all major desktop and mobile browsers including IE9.

Debugging

1. Differentiating between # and pathname if both are same:
In certain scenarios modern browsers trigger both hashchange and popstate events when URL hash is updated. This causes route handler to execute twice when both # and pathname are same. Example: http://example.com/path/to/route#/path/to/route

$.route('/path/to/route', function () {
   console.log('Executed twice');
});

Simply add a safety check to identify which is which:

$.route('/path/to/route', function (data) {
    if (data.hash) {
        console.log('Executes on hashchange');
    } else {
        console.log('Executes on popstate');
    }
});

2. Router's init method doesn't work:
The only reason why it doesn't work is because it needs route handlers to be attached first.

$.router.init();
$.route('/path/to/route', function () {
    console.log('Does it work?'); // No
});
...
$.route('/path/to/route', function () {
    console.log('Does it work?'); // Yes! It does
});
$.router.init();

3. My routes are not working
JQuery router plugin does a validation check on routes. A correct route always starts with a /.

$.route('/path/to/route', function () { ... }); // Correct
$.route('path/to/route', function () { ... }); // Incorrect

4. I am creating too many routes for doing same set of things
JQuery router comes with an option of generic routes.

$.route('*', function (data) {
    if (data.route === '/path/to/route') {
        console.log('Just works!');
    }
});

You can always differentiate between hashchange and popstate events by checking data.hash.

Demo