lithiumjake / vue-lanes

Event-based routing system for Vue.js

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() {

        this.$watch('query', function(query) {

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

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

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.

lanes:route

The lanes:route event will send a route paramater, which is the route object provided by miniroutes.

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.