README_NOT_MIXIN.md

LitElement Router

A simple and lightweight LitElement Router.

Installation

npm install lit-element-router --save

Examples

Mixin

Complete example using JavaScript mixins

Minimal

import { LitElement, html } from 'lit-element'
import { router } from 'lit-element-router'

class MyApp extends LitElement {
    constructor() {
        super()
        router([{
            name: 'home',
            pattern: ''
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }], (route, params, query) => {
            console.log(route, params, query)
        })
    }
}

customElements.define('my-app', MyApp)

Simple

import { LitElement, html } from 'lit-element'
import { router, RouterSlot, RouterLink } from 'lit-element-router'

class MyApp extends LitElement {

    static get properties() {
        return {
            route: { type: String },
            params: { type: Object }
        }
    }

    constructor() {
        super()
        router([{
            name: 'home',
            pattern: ''
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }], (route, params, query) => {
            this.route = route
            this.params = params
            console.log(route, params, query)
        })
    }

    render() {
        return html`
            <nav>
                <router-link href='/'>Home</router-link>
                <router-link href='/info'>Info</router-link>
                <router-link href='/user/14'>user/14</router-link>
            </nav>
            <router-slot route='${this.route}'>
                <div slot='home'>Home</div>
                <div slot='info'>Info</div>
                <div slot='user'>User ${this.params.id}</div>
                <div slot='not-found'>Not Found</div>
            </router-slot>
        `
    }
}

customElements.define('my-app', MyApp)

Advanced

import { LitElement, html } from 'lit-element'
import { router, RouterSlot, RouterLink } from 'lit-element-router'

class MyApp extends LitElement {

    static get properties() {
        return {
            route: { type: String },
            params: { type: Object }
        }
    }

    constructor() {
        super()
        router([{
            name: 'home',
            pattern: '',
            // Each route can accept an individual callback
            callback: (route, params, query)=>{ console.log('callback', route, params, query)},
            // Simple function guard
            guard: () => { return true }
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id',
            // Promised function guard
            guard: () => {
                return new Promise((resolve, reject) => {
                    // Call an API for Athorization
                    resolve(true)
                })
            }
        }, {
            name: 'not-found',
            pattern: '*'
        }], (route, params, query) => {
            this.route = route
            this.params = params
            console.log(route, params, query)
        })
    }

    render() {
        return html`
            <nav>
                <router-link href='/'>Home</router-link>
                <router-link href='/info'>Info</router-link>
                <router-link href='/user/14'>user/14</router-link>
            </nav>
            <router-slot route='${this.route}'>
                <div slot='home'>Home</div>
                <div slot='info'>Info</div>
                <div slot='user'>User ${this.params.id}</div>
                <div slot='not-authorized'>Not Authorized</div>
                <div slot='not-found'>Not Found</div>
            </router-slot>
        `
    }
}

customElements.define('my-app', MyApp)

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions