lit-elem-router
Simple, lightweight router written to be used with web components. Supports lazy loading.
Usage
Install the package
npm i lit-elem-router
Import router in your component class
import 'lit-elem-router';Create a layout for your page
<lit-router>
<lit-route path="/" tag-name="app-home"></lit-route>
<lit-route path="/register" tag-name="app-register"></lit-route>
<lit-route path="/login" tag-name="app-login"></lit-route>
</lit-router>You can nest routers
<lit-router>
<lit-route path="/" tag-name="app-home"></lit-route>
<lit-route path="/auth" tag-name="app-auth"></lit-route>
</lit-router>Now in AppAuth.js you can have
<lit-router>
<lit-route path="/auth/register" tag-name="app-register"></lit-route>
<lit-route path="/auth/login" tag-name="app-login"></lit-route>
<lit-router>Lazy loading can be done by listening to the route activation:
<lit-router>
<lit-route path="/"
tag-name="app-home-page"
@activate="${this._loadHome}"></lit-route>
<lit-route path="/register"
tag-name="app-register-page"
@activate="${this._loadRegister}">
</lit-route>
</lit-router>Now you can load your components:
function _loadHome() {
import('./pages/app-home-page');
}If you want a default route, that will be activated if nothing else matches the path, you can use ** as a fragment in your path
<lit-router>
<lit-route path="/home" tag-name="app-home-page"></lit-route>
<lit-route path="/register" tag-name="app-register-page"></lit-route>
<lit-route path="/**" tag-name="app-404-page"></lit-route>
</lit-router>No navigate using js, you can use static functions provided by Router
// To go to /register
Router.navigate('/register');
// To return to the prev location
Router.back();Router supports parameters in url like node or angular:
<lit-router>
<lit-route path="/user/:id" tag-name="app-home-page"></lit-route>
</lit-router>Feel free to open an issue if you need help, or you found a bug