Vue Lanes
Event-based routing system for Vue.js.
Example
Vue Lanes need to be initialized first. The Lanes
extended Vue will let you create Vue Lanes components, or can be directly instantiated.
See the example directory for a more complete example.
var Vue = ;var vueLanes = ; var Lanes = ; var app = { // The lanes:route event will be emitted each time the route has changed this; } components: search: Lanes ;
Installation
$ npm install vue-lanes
Events
Inside a Lanes
extended Vue, you can listen for the lanes:route
event, and dispatch a lanes:path
event to change the path.
If you are interested by a specific route, you can listen for the lanes:update:<route_name>
and lanes:leave:<route_name>
events.
lanes:route
The lanes:route
event will send a route
paramater, which is the route object provided by miniroutes.
lanes:update:<route_name>
Where <route_name>
is the name of a registered route.
The lanes:update:<route_name>
acts exactly as the lanes:route
event, except it is for a specific route. This is useful if you want to do something when a specific route is active.
lanes:leave:<route_name>
Where <route_name>
is the name of a registered route.
The lanes:leave:<route_name>
is triggered everytime another route is set. This event is not triggered if a route is just updated (different path).
lanes:path
The lanes:path
event must be dispatched from a Vue Lanes instance in order to update the path. The root Vue Lanes instance will then broadcast a lanes:route
.
TODO
- Add an
history.pushState
mode.
Browser compatibility
IE9+ and modern browsers.
License
Special thanks
Illustration made by Raphaël Bastide with scri.ch.