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.
        });
      }
    })
  }
});