doz-router

2.0.3 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i doz-router

Weekly Downloads

312

Version

2.0.3

License

MIT

Unpacked Size

156 kB

Total Files

18

Last publish

Collaborators

  • fabioricali