Social Media Photo by Jakub Gorajek on Unsplash
Express like routing, as Custom Element or standalone, inspired by page.js.
app.get(path:string|RegExp, cb:Function[, cb2, ...]):app
to subscribe one or more callbacks for the specified routeapp.delete(path:string|RegExp, cb:Function[, cb2, ...]):app
to unsubscribe one or more callbacks for the specified routeapp.navigate(path:string[, operation:string = 'push']):void
to navigate to the first matching route for the given path. By default, it pushes to the history but it couldreplace
, if the second parameter is the replace string, orignore
.app.param(path:string|RegExp):app
to subscribe to a specific parameter regardless of the routeapp.use(path:string|RegExp):app
to subscribe a callback for a specific mount point or all of them
The following is a basic example, also available live.
<script src="//unpkg.com/a-route"></script>
<!-- simply add `is="a-route"` to any link in your page -->
<a is="a-route" href="/test/?query=value">test query</a>
<!-- you can also add `no-propagation`, to stop propagation on click
or you could add `replace` to replace state instead of pushing it -->
<a is="a-route" href="/test/OK" no-propagation replace>test OK</a>
<!-- unregistered routes will pass through `'*'` handler, if any -->
<a is="a-route" href="/whatever">test 404</a>
// import {app} from 'a-route';
// const {app} = require('a-route');
const {app} = ARoute;
// define routes
app
.get('/test/?query=:query', function (ctx) {
console.log(ctx);
/*
{
"path": "/test/?query=value",
"params": {
"query": "value"
}
}
*/
})
.get('/test/:status', function (ctx) {
console.log(ctx);
/*
{
"path": "/test/OK",
"params": {
"status": "OK"
}
}
*/
});
// intercept all unregistered calls
app.get('*',
function (ctx, next) {
console.log(ctx);
/*
{
"path": "/whatever"
}
*/
next();
},
// will receive the ctx object too
console.error
);