A Tiny Front End Router.
<script src="../lib/router.js"></script>
<script>
var router = new Router();
router.on({
'/author': function() {
console.log('/author route');
},
'/about/(.*)?': function(id) {
console.log('/about route, id:', id);
},
'/aboutme/(.*)?/(.*)?': function(id, name) {
var retId = id;
var retName = name;
}
});
router.go('/');
router.go('/author');
router.go('/about');
// OR, we can add a route like this.
router.on('/page', function() {
console.log('/page route');
});
</script>
-
Import It's exported by UMD. We could use it by AMD, Common JS require, or directly import through
<script>
tag in the browser environment. -
Router Initialize After imported, we could initialize it like:
var router = new Router({
mode: 'history', // 'history' or 'hash'
root: '/' // by default
});
// We could also init in this way.
var router = new Router();
router.config({
mode: 'history', // 'history' or 'hash'
root: '/' // by default
});
- Use it
router.on('/page', function() {
console.log('/page route');
});
// Or,we could dispatch a bunch of routes.
router.on({
'/author': function() {
console.log('/author route');
},
'/about/(.*)?': function(id) {
console.log('/about route, id:', id);
}
});
go to specified path.
router.go('/author');
- Re-initialize
router.flush();
npm install
npm run build