doz-router v2.0.3

doz-router

Routing for DOZ framework

Live here (doesn't work.. I will fix it)

Install

npm install --save doz-router

Basic example

import Doz from 'doz'
import 'doz-router'

Doz.component('home-page', {
    template(h) {
        return h`
            <div>I'm home page <a data-router-link data-router-anchor-link href="#my-anchor">anchor link</a></div>
        `
    }
});

Doz.component('about-page', {
    template(h) {
        return h`
            <div>I'm about page</div>
        `
    }
});

Doz.component('contact-page', {
    template(h) {
        return h`
            <div>I'm contact page</div>
        `
    }
});

Doz.component('page-not-found', {
    template(h) {
        return h`
            <div>Page not found</div>
        `
    }
});

new Doz({
    root: '#app',
    template(h) {
        return h`
            <nav>
                <a data-router-link="true" href="/">Home</a>
                <a data-router-link="true" href="/about">About</a>
                <a data-router-link="true" href="/contact">Contact</a>
                <a data-router-link="true" href="/not-found-page-bla-bla">Not found</a>
            </nav>
            <doz-router suspendcontent>
                <home-page route="/"/>
                <about-page route="/about"/>
                <contact-page route="/contact"/>
                <page-not-found route="*"/>
            </doz-router>
        `
    }
});

Using HTML5 api pushstate

new Doz({
    root: '#app',
    template(h) {
        return h`
            <doz-router mode="history" suspendcontent>
                //...
            </doz-router>
        `
    }
});

Dynamic routes

new Doz({
    root: '#app',
    template(h) {
        return h`
            <doz-router suspendcontent>
                <user-page route="/user/:id"/>
            </doz-router>
        `
    }
});

Wild cards

new Doz({
    root: '#app',
    template(h) {
        return h`
            <nav>
                <a data-router-link="true" data-router-link-radix="true" href="/docs/">Docs</a>
                <a data-router-link="true" href="/docs/something">Docs Something</a>
            </nav>
            <doz-router suspendcontent>
                <docs-page route="/docs/*"/>
            </doz-router>
        `
    }
});

Props

Instance methods

navigate

Example

this.router.navigate('/about');

currentPath

Returns current path. (since 1.0.0)

param

Example

// A route defined like so '/user/:id'

this.router.param('id');

query

Example

// A route defined like so '/news/?search=tech'

this.router.query('search');

Changelog

You can view the changelog here

License

doz-router is open-sourced software licensed under the MIT license

Author

Fabio Ricali