https://github.com/jesse1983/marko-router5
Flexible and powerful routing for MarkoJS
https://github.com/jesse1983/marko-router5
markojs nodejs router5
Last synced: 4 months ago
JSON representation
Flexible and powerful routing for MarkoJS
- Host: GitHub
- URL: https://github.com/jesse1983/marko-router5
- Owner: jesse1983
- License: mit
- Created: 2018-07-31T20:37:09.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T08:47:19.000Z (over 3 years ago)
- Last Synced: 2025-10-02T19:25:51.234Z (8 months ago)
- Topics: markojs, nodejs, router5
- Language: JavaScript
- Homepage: https://jesse1983.github.io/marko-router5
- Size: 2.29 MB
- Stars: 29
- Watchers: 1
- Forks: 4
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Getting Started
Flexible and powerful routing for MarkoJS.
Full documentation: [https://jesse1983.github.io/marko-router5](https://jesse1983.github.io/marko-router5)
## Installation
Install marko-router5 package:
```sh
npm i marko-router5 -D
```
## Usage
Define routes on main marko file:
```html
$ 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') },
]
```
## Navigate
Add `route-link` tag instead `a` tag:
```html
Home
Products
Contact
```
or
Import `navigate` method:
```js
const { navigate } = require('marko-router5');
navigate('/products');
```
## Nested routes
```js
$ 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](https://router5.js.org/guides/router-options) page.
```html
```
#### InitialPath
A initial path can be a string (ex: `/dashboard`) or a bool (if true, initial path will be current window location).
```html
```
#### noWrapper
Remove `
` wrapper.
```xml
```
### 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
}
}
```
#### transitionSuccess
After route change. **Value**: an object with next and previous route state `{ toState, fromState }`:
```
class {
transitionSuccessMethod(states) {
// use states.toState or states.fromState
}
}
```
#### 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 Link
### Attributes
#### ActiveClass
Automatically current link will have class `active`. You can change class name using attribute `active-class`:
```html
Home
```
Result is:
```html
Home
```
#### ParentClass
If you need add `active` class on parent element instead `a` tag, add `parent-class`:
```html
Home
```
Result is:
```html
Home
```