Routing for DOZ framework
Live here (doesn't work.. I will fix it)
npm install --save doz-router
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>
`
}
});
new Doz({
root: '#app',
template(h) {
return h`
<doz-router mode="history" suspendcontent>
//...
</doz-router>
`
}
});
new Doz({
root: '#app',
template(h) {
return h`
<doz-router suspendcontent>
<user-page route="/user/:id"/>
</doz-router>
`
}
});
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>
`
}
});
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 |
Param | Type | Default | Description |
---|---|---|---|
path | string |
undefined | path to navigate |
params | object |
undefined | optional params |
this.router.navigate('/about');
Returns current path. (since 1.0.0)
Param | Type | Default | Description |
---|---|---|---|
property | string |
undefined | property name |
// A route defined like so '/user/:id'
this.router.param('id');
Param | Type | Default | Description |
---|---|---|---|
property | string |
undefined | property name |
// A route defined like so '/news/?search=tech'
this.router.query('search');
You can view the changelog here
doz-router is open-sourced software licensed under the MIT license