@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(...);