edisplay/vanilla-router

Vanilla Router for OPA sites

vanilla-router

Description

Simplest One Page Application Router for those who want to use it on Vanilla JS

Note: If you want to use the IE compatible version use v1.1.5

Installation

NPM

npm install vanilla-router --save

Bower

bower install vanilla-router --save

Usage

var router = new Router({
    mode: 'history',
    page404: function (path) {
        console.log('"/' + path + '" Page not found');
    }
});

router.add('', function () {
    console.log('Home page');
});

router.add('hello/(:any)', function (name) {
    console.log('Hello, ' + name);
});

router.add('about', function () {
    console.log('About Page');
});

router.addUriListener();

router.navigateTo('hello/World');

Options

mode string

Default: "history" .

• hash - is for hashbang routes based on window.location.hash
• history - is for clean url routes based on HTML5 functionality. It is also provide back-compatibility for old browser.

root string

Default: "/" .

Root represents the relative path for the project root.

page404 function

Default: function that log an error in console.

Callback function for 404 page

routes Array

Default: [ ]

Warning! Use it only if you have all stack with RegExp routes.

Methods

Every public methods of Router return the instance of Router, so they can be chained.

add(path, handler, options)

Add a route and handler for this route

Parameters

• path - string | RegExp
• handler - callback if the URL will match the path
• options - object, you can specify before unload callback

string path can contain:

• parenthesis (( )) - value between them is sent to callback function
• wildcards (:any, :num, :word) it doesn't pass the value to callback function
• named placeholder ({variableName}) it pass the value to the callback function

router.add('hello/world', function(){ });
router.add('hello/:word', function(){ });
router.add('hello/(:word)', function(name){ });
router.add('hello/{name}', function(name){ });
router.add(/^hello\/(\w+)/i, function(name){ });

remove(path)

Remove the route from current list of routes by path

navigateTo(path[, state[, silent]])

Navigate to the specific URI with optional additional state of page silent is a flag, set as true, to skip check for new URL

check()

Check the current URL for a change

back()

Simulate the browser "Back" button

forward()

Simulate the browser "Forward" button

go(step)

Go to a specific step in history

refresh()

Recall current route handler with same arguments

addUriListener()

Add the event listener for URL change

removeUriListener()

Remove the event listener for URL change

reset()

Reset all setting and state of Router

Licence

Released under the MIT license

Copyright (c) 2016 Grigore Odajiu