Graidenix
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 --saveBower
bower install vanilla-router --saveUsage
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 onwindow.location.hashhistory- 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 | RegExphandler- callback if the URL will match the pathoptions- 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