Getting Started

Flexible and powerful routing for MarkoJS.

Full documentation: https://jesse1983.github.io/marko-router5

Installation

Install marko-router5 package:

npm i marko-router5 -D

Usage

Define 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>

Navigate

Add route-link tag instead a tag:

<route-link href="https://github.com/jesse1983/marko-router5/blob/master/" class="nav-item">Home</route-link>
<route-link href="https://github.com/jesse1983/marko-router5/blob/master/products" class="nav-item">Products</route-link>
<route-link href="https://github.com/jesse1983/marko-router5/blob/master/contact" class="nav-item">Contact</route-link>

or

Import navigate method:

const { navigate } = require('marko-router5');

navigate('/products');

Nested routes

$ 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') },
    ] },
  ] },
]

Advanced

Router

Attributes

Options

All router options are on Router Options page.

<router routes=routes options={ defaultRoute: 'home' } />

InitialPath

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 />

noWrapper

Remove <div class="router5-placeholder"> wrapper.

<router routes=routes no-wrapper />

Events

transitionStart

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') />

transitionSuccess

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') />

transitionError

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') />

Route Link

Attributes

ActiveClass

Automatically current link will have class active. You can change class name using attribute active-class:

<route-link href="https://github.com/jesse1983/marko-router5/blob/master/" class="nav-item" active-class="current">Home</route-link>

Result is:

<a href="https://github.com/jesse1983/marko-router5/blob/master/" class="nav-item current">Home</a>

ParentClass

If you need add active class on parent element instead a tag, add parent-class:

<li>
  <route-link href="https://github.com/jesse1983/marko-router5/blob/master/" class="nav-item" parent-class>Home</route-link>
</li>

Result is:

<li class="active">
  <a href="https://github.com/jesse1983/marko-router5/blob/master/" class="nav-item">Home</a>
</li>