# LitElement Router A simple and lightweight LitElement Router. [](https://coveralls.io/github/hamedasemi/lit-element-router?branch=mainline) [](https://badge.fury.io/js/lit-element-router) [](https://www.webcomponents.org/element/lit-element-router) [](https://snyk.io/test/github/hamedasemi/lit-element-router?targetFile=package.json) [](https://circleci.com/gh/hamedasemi/lit-element-router/tree/mainline) ## Installation ```sh npm install lit-element-router --save ``` ## Usage ### Working example You can find a working project on StackBlitz https://stackblitz.com/edit/lit-element-router ### Minimal ```js import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { static get routes() { return [{ name: 'home', pattern: '', data: { title: 'Home' } }, { name: 'info', pattern: 'info' }, { name: 'user', pattern: 'user/:id' }, { name: 'not-found', pattern: '*' }]; } onRoute(route, params, query, data) { console.log(route, params, query, data) } } customElements.define('my-app', MyApp); ``` # Complete Example Using JavaScript Mixins in Details ## Dont like mixins check out other examples Don't want to use mixins interface you cane use a simple version in this tutorial: https://github.com/hamedasemi/lit-element-router/blob/mainline/README_NOT_MIXIN.md ## Make any arbitary components or elements to a router using router mixins method ```javascript import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { } customElements.define('my-app', MyApp); ``` ## Register routes and the onRoute function ```javascript import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { static get routes() { return [{ name: 'home', pattern: '' }, { name: 'info', pattern: 'info' }, { name: 'user', pattern: 'user/:id' }, { name: 'not-found', pattern: '*' }]; } onRoute(route, params, query, data) { this.route = route; this.params = params; } } customElements.define('my-app', MyApp); ``` ## Make any arbitary components or elements to a router outlet using router outlet mixins method ```javascript import { LitElement, html } from 'lit-element'; import { routerOutletMixin } from 'lit-element-router'; export class AnyArbitaryLitElement extends routerOutletMixin(LitElement) { } customElements.define('any-arbitary-lit-element', AnyArbitaryLitElement); ``` ## Put the components under router outlet ```javascript import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { static get routes() { return [{ name: 'home', pattern: '' }, { name: 'info', pattern: 'info' }, { name: 'user', pattern: 'user/:id' }, { name: 'not-found', pattern: '*' }]; } onRoute(route, params, query, data) { this.route = route; this.params = params; } render() { return html`

Home any-arbitary-lit-element

mY Info any-arbitary-lit-element

User ${this.params.id} any-arbitary-lit-element

Not Authorized any-arbitary-lit-element

Not Found any-arbitary-lit-element

`; } customElements.define('my-app', MyApp); ``` ## Make any arbitary components or elements to a router link using router link mixins method ```javascript import { LitElement, html } from 'lit-element'; import { routerLinkMixin } from 'lit-element-router'; export class AnArbitaryLitElement extends routerLinkMixin(LitElement) { } customElements.define('an-arbitary-lit-element', AnArbitaryLitElement); ``` ## Navigate using the router navigate method ```javascript import { LitElement, html } from 'lit-element'; import { routerLinkMixin } from 'lit-element-router'; export class AnArbitaryLitElement extends routerLinkMixin(LitElement) { constructor() { super() this.href = '' } static get properties() { return { href: { type: String } } } render() { return html` ` } linkClick(event) { event.preventDefault(); this.navigate(this.href); } } customElements.define('an-arbitary-lit-element', AnArbitaryLitElement); ``` ## Browsers support | [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
iOS Safari | [](http://godban.github.io/browsers-support-badges/)
Samsung | [](http://godban.github.io/browsers-support-badges/)
Opera | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions