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

| Name | Default | Description | Since | | ---- | ------- |------------------------------------------------------------------------------------------------------------------------| ----- | | hash | # | hash symbol | | | class-active-link | router-link-active | css class for active router link | | | link-attr | data-router-link | attribute that identify link | | | mode | hash | router mode "hash" or "history" (html5 api) | | | root | / | base root, works only in "history" mode | | | initial-redirect | | applies a redirect to specific path if initial path is "/" | 1.4.0 | | initial-redirect-last | | applies a redirect to last path visited | 1.8.0 | | no-destroy | | when a route changes the component will not be destroyed but only unmounted from the DOM, so the state will not change | 1.6.0 |

Instance methods

navigate

| Param | Type | Default | Description | | ---- | ------- | ----------- | ---------- | | path | string | undefined | path to navigate | | params | object | undefined | optional params |

Example

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

currentPath

Returns current path. (since 1.0.0)

param

| Param | Type | Default | Description | | ---- | ------- | ----------- | ---------- | | property | string | undefined | property name |

Example

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

this.router.param('id');

query

| Param | Type | Default | Description | | ---- | ------- | ----------- | ---------- | | property | string | undefined | property name |

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