@xlit/router
v2.8.1
Published
xlit router
Downloads
63
Maintainers
reekoheekReadme
@xlit/router
Vanilla router custom element with multiple routes and middlewares.
Installation
npm i @xlit/routerGetting started
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@xlit/router</title>
</head>
<body>
<div id="outlet"></div>
<template id="homeTemplate">
<div>
<h1>Home</h1>
</div>
</template>
<script type="module" src="index.js"></script>
</body>
</html>Write index.js:
import { Navigator, Router, template, component } from '@xlit/router';
customElements.define('x-login', class Login extends HTMLElement {
// ...
});
const router = new Router(document.getElementById('outlet'))
.use(async (ctx, next) => {
// do something before
await next();
// do something after
})
// route with template element
.route('/', template(document.getElementById('homeTemplate'))
// route with custom element component
.route('/login', component('x-login'))
// route with lazy loading component
.route('/lazy', component('x-lazy', () => import('./lazy.js')));
await Navigator.start(router);Write lazy.js:
customElements.define('x-lazy', class Lazy extends HTMLElement {
// ...
});Navigate
Navigator.push('/foo');
Navigator.replace('/foo');
Navigator.pop();
Navigator.go(1);Router Mode
Router mode can be configured from mode router options whether use push state
history or hash-bang mode. Default value is history.
const defaultRouter = new Router(outlet); // history
const hashRouter = new Router(outlet, { mode: 'hash' }); // hash
const historyRouter = new Router(outlet, { mode: 'history' }); // history