Express-like Simple Router.
Install
$ npm install --save esr
Sample
; // create an instance.const router = ; // routing definition.const onEnter = { // called when the url got changed to `/users`.};router; // start listening for the url to change.routerstart; // change the url.router;
Constructor
Esr provides 3 different methods for creating a history object, depending on your environment.
; // use HTML5 history API.const router = EsrBROWSER; // use memory.const router = EsrMEMORY; // use hash.const router = EsrHASH;
default is Esr.BROWSER
.
Routing
router.navigateTo(String, Boolean)
change current url. set secound parameter true
to force navigate.
;const router = ; router;router;router;router;router;
router.replace(String)
replace current url.
;const router = ; router;
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
.
;const router = ; router; // suppose that the current url is `https://sample.com/users`.routerstart;//=> 'users'
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.
;const router = ; router;router;router; router;//=> 'users'router;//=> 'a user'router;//=> 'not found'
onEnter
type: Function
example: function(route)
a callback function that will be called when the url matches the pattern
.
;const router = ; router; router;//=> 'a user';
route
route
object consists of some extra information.
route.params
(Object) key-value data matched on thepattern
.route.queries
(Object) key-value data of query.route.hash
(String) hash value.
;const router = ; router; router;
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.
;const router = ; router; router; router;//=> 'onBefore of /aaa'//(=> 'onEnter of /bbb') <= this won't be logged.//=> 'onEnter of /bbb'
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 beforerouter.on
's callback.router.onBefore
called just beforerouter.on
's callback.router.onAfter
called just afterrouter.on
's callback.router.onAfterOnce
called only once. just afterrouter.on
's callback.
;const router = ; router ; router;//=> 'before once'//=> 'before'//=> '*'//=> 'after'//=> 'after once' router;//=> 'before'//=> '*'//=> 'after'
Async
By passing a callback function that returns a Promise, you can handle async programing.
;const router = ; router; router;//=> 'onBefore'// wait for 1000ms...//=> 'onEnter'// wait for 1000ms...//=> 'onAfter'// wait for 1000ms...//=> 'complete!'
Test
$ npm run test
Build
$ npm run build
Watch
$ npm run watch
Lint
$ npm run lint