Categories
Plugins

jqueryrouter

JQuery Routing Plugin
JQuery router is a SPA (Single Page Apps) router plugin for jQuery.
Upgrade to Silkrouter (Recommended)
Silkrouter is latest recommended version. Refer to migration documentation for more details. Please note that we are going end support for jqueryrouter soon. The package will continue to exist but there won’t be any further security updates or patches to this version.
Installation
Using npm:
npm install –save jqueryrouter deparam.js jquery
Using CDN:

How to use?
JQuery router uses event emitters similar to jQuery custom events.
Bind router events
import $ from ‘jquery’;import ‘jqueryrouter’; $.route(‘/path/to/route’, (e) => {    …});$.route(‘#/path/to/route’, (e) => {    …});
Trigger router event
$.router.set(‘/path/to/route’);// OR$.router.set({    route: ‘/path/to/route’});
Generic router
JQuery router allows you to attach a listener that listens to all changes in history.
$.route(‘*’, (e) => {    switch(e.route) {        ‘/path/to/route’: …;        …    }});// OR$.route((e) => {    switch(e.route) {        ‘/path/to/route’: …;        …    }});
Note: You need to attach handlers before you can trigger router events.
Hash router check
If normal and hash routes are same, route handler to executed twice. You can check the event source using e.hash:
$.route(‘…’, (e) => {    if (e.hash) { … }});
Trigger route handlers on page load/reload
To trigger route handlers on page load/reload, you need to call router.init method.
$.router.init();
The init method keeps track of handlers which have triggered before. If a handler is called before, it is not called again.
Persisting data
Via query string:
$.route(‘/path/to/route’, (e, params, query) => {    console.log(query); // -> { h: ‘Hello World’ }}); $.router.set({    route: ‘/path/to/route’,    queryString: ‘h=Hello World’});
Via route params:
$.route(‘/path/:to/:route’, (e, params, query) => {    console.log(params); // -> { to: ‘value1’, route: ‘value2’ }}); $.router.set({    route: ‘/path/value1/value2’});
Passing data one time
JQuery router allows you to pass data directly to handler. This data is not persisted in jQuery version due to limitations of IE9.
$.router.set({    route: ‘/path/to/route’,    data: { … } // Data should be a valid object});
Browser support
Jquery router has been tested in browsers below:
Desktop: IE 9 – 11, Chrome, Firefox, Safari, Opera, Edge
Mobile: Chrome, Safari, Firefox
Debugging
Debugging
Demo
https://jqueryrouter.herokuapp.com/

GitHub Repo