@djx/router
v0.1.0
Published
Simple and easy-to-use lit-element router
Downloads
4
Readme
@djx/router
A router built with lit-element and @smoovy/router
Installation
npm install --save @djx/router
Usage
Make sure you import the component somewehere in your application first:
import '@djx/router';
You can then use it like normal web components in your markup:
<nav>
<djx-router-link>
<a href="/random/page">Link to random page</a>
</djx-router-link>
<!-- Ignores blank target -->
<djx-router-link>
<a href="https://tinyurl.com/2fcpre6" target="_blank">
<span>Link to external page</span>
</a>
</djx-router-link>
</nav>
<main>
<djx-router-outlet>
<!-- Display as "block" (display: block) -->
<djx-router-link block>
<a href="/boring/page">Link inside outlet</a>
</djx-router-link>
</djx-router-outlet>
</main>
Maniuplating the router directly
To access the router instance you have to go throught the outlet:
const outlet = document.body.querySelector('djx-router-outlet');
const router = await outlet.router;
// Do router stuff
router.addTransition(...);