English
Express-like Simple Router.
Install
$ npm install --save esr
Sample
import Esr from 'esr';
const router = new Esr();
const onEnter = function() {
};
router.on('/users', onEnter);
router.start();
router.navigateTo('/users');
Constructor
Esr provides 3 different methods for creating a history object, depending on your environment.
import Esr from 'esr';
const router = new Esr(Esr.BROWSER);
const router = new Esr(Esr.MEMORY);
const router = new Esr(Esr.HASH);
default is Esr.BROWSER
.
more detail
Routing
router.navigateTo(String, Boolean)
change current url. set secound parameter true
to force navigate.
import Esr from 'esr';
const router = new Esr();
router.navigateTo('/users');
router.navigateTo('/users/foo');
router.navigateTo('/users/foo?aaa=bbb');
router.navigateTo('/users/foo?aaa=bbb#ccc');
router.navigateTo('/users', true);
router.replace(String)
replace current url.
import Esr from 'esr';
const router = new Esr();
router.replace('/users');
router.start(Boolean)
start listening for the url to change. a boolean argument can be passed to determine whether the esr should fire route an event or not. default is true
.
import Esr from 'esr';
const router = new Esr();
router.on('/users', function(route) {
console.log('users');
});
router.start();
router.on
Routing Definition.
router.on(pattern, onEnter, onBefore, onAfter)
for routing definition.
pattern
type: String
example: /users/:userid
set pattern to match.
Express-Style pattern is applied.
import Esr from 'esr';
const router = new Esr();
router.on('/users', function() {
console.log('users');
});
router.on('/users/:userid', function() {
console.log('a user');
});
router.on('*', function() {
console.log('not found');
});
router.navigateTo('/users');
router.navigateTo('/users/foo');
router.navigateTo('/bar');
more detail
onEnter
type: Function
example: function(route)
a callback function that will be called when the url matches the pattern
.
import Esr from 'esr';
const router = new Esr();
router.on('/users/:userid', function(route) {
console.log('a user');
});
router.navigateTo('/users/foo');
route
route
object consists of some extra information.
route.params
(Object) key-value data matched on the pattern
.route.queries
(Object) key-value data of query.route.hash
(String) hash value.
import Esr from 'esr';
const router = new Esr();
router.on('/users/:userid/:type', function(route) {
});
router.navigateTo('/users/foo/bar?aaa=AAA&bbb=BBB#ccc');
onBefore
type: Function
example: function(route, replace)
a callback function that will be called just before onEnter
when the url matches the pattern
.
route
same as route
of onEnter
.
replace
a function used to redirect to another url.
import Esr from 'esr';
const router = new Esr();
router.on('/aaa', function(route) {
console.log('onEnter of /aaa');
}, function(route, replace) {
console.log('onBefore of /aaa');
});
router.on('/bbb', function(route) {
console.log('onEnter of /bbb');
});
router.navigateTo('/aaa');
onAfter
type: Function
example: function(route)
a callback function that will be called just after onEnter
when the url matches the pattern
.
route
same as route
of onEnter
.
Common Routing Definition
callback functions that will be called for every url pattern.
router.onBeforeOnce
called only once. just before router.on
's callback.router.onBefore
called just before router.on
's callback.router.onAfter
called just after router.on
's callback.router.onAfterOnce
called only once. just after router.on
's callback.
import Esr from 'esr';
const router = new Esr();
router
.onBeforeOnce(function(route) {
console.log('before once');
})
.onBefore(function(route) {
console.log('before');
})
.on('*', function(route) => {
console.log('*');
})
.onAfter(function(route) {
console.log('after');
})
.onAfterOnce(function(route) {
console.log('after once');
});
router.navigateTo('/first');
router.navigateTo('/second');
Async
By passing a callback function that returns a Promise, you can handle async programing.
import Esr from 'esr';
const router = new Esr();
router.on('/users',function(route) {
console.log('onEnter');
return new Promise(function(resolve) {
window.setTimeout(function() {
resolve();
}, 1000);
});
}, function(route, replace) {
console.log('onBefore');
return new Promise(function(resolve) {
window.setTimeout(function() {
resolve();
}, 1000);
});
}, function(route) {
console.log('onAfter');
return new Promise(function(resolve) {
window.setTimeout(function() {
resolve();
}, 1000);
});
}).onAfter(function(route) {
console.log('complete!');
});
router.navigateto('/users');
Test
$ npm run test
Build
$ npm run build
Watch
$ npm run watch
Lint
$ npm run lint