@xlit/router v2.8.1
@xlit/router
Vanilla router custom element with multiple routes and middlewares.
Installation
npm i @xlit/router
Getting 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
9 months ago
9 months ago
6 months ago
9 months ago
6 months ago
9 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
7 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago