lit-element-router - Vaadin Add-on Directory
LitElement Router.
# 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`
`;
}
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`
](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
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
](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