A Polymer component to handle client side URL routing and view loading / management

Usage no npm install needed!

<script type="module">
  import neoviciCosmozPageRouter from 'https://cdn.skypack.dev/@neovici/cosmoz-page-router';



Build Status Published on webcomponents.org Depfu semantic-release Maintainability Test Coverage


cosmoz-page-router is a haunted component to handle client side URL routing and view loading / management.

By default cosmoz-page-router listens to popstate event , gets current location href and matches it against the routes defined.

Getting started


Using npm:

npm install --save @neovici/cosmoz-page-router


The cosmoz-page-router element can be imported using:

import '@neovici/cosmoz-page-router/cosmoz-page-router';



Routes are defined as an Array of Objects:

import { html } from 'lit-html';
import { creteElement, navigate } from '@neovici/cosmoz-page-router/lib/use-routes';

const routes = [
        name: 'home', // optional (can be used to identity the route),
        rule: /^\/$/iu/, // a Regexp used to matched the route,
        handle: ({
            url, // the current url string ( that matched the route)
            match, // the result of matching route against the rule,
        }) => html`<home />`
        name: 'some-page',
        rule: (url) => url.startsWith('/some-page'), // function called with current url string
        handle: ({ url })=>import('page.js')
            .then(()=> createElement('some-element', Object.fromEntries(url.searchParams)))
        name: 'redirect',
        rule: /^\/some\-redirect$/iu,
        handle: ()=> navigate('#!/', null, {
            replace: true, // true to use replaceState,false to use pushState,
            notify: true // true to dispatch a `popstate` event

and passed to cosmoz-page-router:

html`<cosmoz-page-router .routes=${routes} />`;


See http://neovici.github.io/cosmoz-page-router (outdated)