Flexible and powerful routing for MarkoJS.
Full documentation: https://jesse1983.github.io/marko-router5
Install marko-router5 package:
npm i marko-router5 -DDefine routes on main marko file:
<!-- Define routes -->
$ const routes = [
{ name: 'home', path: '/', component: require('./home.marko') },
{ name: 'products', path: '/products', component: require('./products.marko') },
{ name: 'contact', path: '/contact', component: require('./contact.marko') },
]
<div>
<router routes=routes />
</div>Add route-link tag instead a tag:
<route-link href="/" class="nav-item">Home</route-link>
<route-link href="/products" class="nav-item">Products</route-link>
<route-link href="/contact" class="nav-item">Contact</route-link>or
Import navigate method:
const { navigate } = require('marko-router5');
navigate('/products');$ const routes = [
{ name: 'products', path: '/products', component: require('./products.marko'), children: [
{ name: 'notebooks', path: '/notebooks', component: require('./notebooks.marko') },
{ name: 'desktops', path: '/desktops', component: require('./desktops.marko') },
{ name: 'others', path: '/others', component: require('./others.marko'), children: [
{ name: 'cpu-processors', path: '/cpu-processors', component: require('./cpu-processors.marko') },
{ name: 'memory-cards', path: '/memory-cards', component: require('./memory-cards.marko') },
] },
] },
]All router options are on Router Options page.
<router routes=routes options={ defaultRoute: 'home' } />A initial path can be a string (ex: /dashboard) or a bool (if true, initial path will be current window location).
<router routes=routes initial-path="/dashboard" />
<!-- or -->
<router routes=routes initial-path />Remove <div class="router5-placeholder"> wrapper.
<router routes=routes no-wrapper />Before route change. Value: an object with next and previous route state { toState, fromState }:
class {
transitionStartMethod(states) {
// use states.toState or states.fromState
}
}
<route routes=routes on-transition-start('transitionStartMethod') />
After route change. Value: an object with next and previous route state { toState, fromState }:
class {
transitionSuccessMethod(states) {
// use states.toState or states.fromState
}
}
<route routes=routes on-transition-success('transitionSuccessMethod') />
After route change and throw an error. Value: an object with next and previous route state and the error { toState, fromState, err }:
class {
transitionErrorMethod(states) {
// use states.toState, states.fromState or states.err
}
}
<route routes=routes on-transition-error('transitionErrorMethod') />
Automatically current link will have class active. You can change class name using attribute active-class:
<route-link href="/" class="nav-item" active-class="current">Home</route-link>Result is:
<a href="/" class="nav-item current">Home</a>If you need add active class on parent element instead a tag, add parent-class:
<li>
<route-link href="/" class="nav-item" parent-class>Home</route-link>
</li>Result is:
<li class="active">
<a href="/" class="nav-item">Home</a>
</li>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent