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 = require('vue');
var vueLanes = require('vue-lanes');

var Lanes = vueLanes(Vue, {

  prefix: '!/', // The path prefix

  routes: function(route) {
    
    // Add routes with the route() function
    route(
      'index', // Route name
      /^$/ // Route regex
    );

    // Use capturing groups to retrieve parameters
    route('search', /^search\/(.+)$/);
  }
});

var app = new Lanes({

  created: function() {

    // The lanes:route event will be emitted each time the route has changed
    this.$on('lanes:route', function(route) {
      // do something
    });

  },
  components: {
    search: Lanes.extend({
      data: { query: '' },
      created: function() {

        // Dispatch the lanes:path event to the root VM to change the path,
        // which will automatically change the current route
        this.$watch('query', function(query) {
          this.$dispatch('lanes:path', 'search/' + query);
        });

        // The lanes:update:search event is broadcasted from the root Lanes Vue.
        // You can safely use it to update your value, even if it’s watched,
        // because Vue Lanes will prevent infinite loops in most cases.
        this.$on('lanes:update:search', function(route) {
          this.query = route.params[0];
        });

        // The lanes:route event is broadcasted each time a new route is set.
        this.$on('lanes:route', function(route) {
          // This function will be called on every route change.
        });
      }
    })
  }
});

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

MIT

Special thanks

Illustration made by Raphaël Bastide with scri.ch.