cosmoz-page-router
<cosmoz-page-router>
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
Installing
Using npm:
npm install --save @neovici/cosmoz-page-routerImporting
The cosmoz-page-router element can be imported using:
import '@neovici/cosmoz-page-router/cosmoz-page-router';Usage
Routes
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} />`;Documentation
See http://neovici.github.io/cosmoz-page-router (outdated)
TODO