Major rewrite. Directly extends from v-component. Add options and navigate.

Add Vue.navigate(path) method to manually trigger a page change. The 'routes' hash now takes an 'options' object containing the debug and broadcast booleans, as well as 3 new props: click, base and hashbang. Extends the latest version of v-component.

Author: ayamflow

README.md

@@ -2,7 +2,7 @@ vue-route
 =======
 
 Routing directive for Vue.js **(v0.11)**, inspired by ng-view.
-`v-transition` are supported, as well as keep-alive.
+Based on `v-component` thus benefits from `v-transition`, `keep-alive`, `wait-for`, `transition-mode`.
 
 Allows you to declare your routes on the $root Vue object:
 
@@ -19,7 +19,9 @@ var root = new Vue({
             componentId: 'fg-work',
             afterUpdate: 'updateHeader'
         },
-        broadcast: false
+        options: {
+            hashbang: true
+        }
     },
 })
 
@@ -33,7 +35,9 @@ with minimal markup:
 </body>
 
 ```
-It's heavily based on the `v-component` directive by @yyx990803 (on the [vuejs repo](https://github.com/yyx990803/vue/blob/0.11.0-rc3/src/directives/component.js)) so big up to him!
+
+`vue-route` extends the `v-component` directive by @yyx990803 (on the [vuejs repo](https://github.com/yyx990803/vue/tree/master/src/directives/component.js)). Buy him a coffee if you can.
+
 ## Get started
 
 **1.** Install with npm/component(1): `npm i vue-route --save` or `component install ayamflow/vue-route`.
@@ -61,17 +65,19 @@ Vue.use(route); // BOOM
     * *afterUpdate*: a callback (mehod or name of method on the vm) to call after effectively having changed to this route
     * *isDefault*: boolean indicating wether this page should be the default, in case of non-existing URL. Think of it as the `otherwise` from Angular, so basically a 404 or the home page.
 
+Vue is augmented with an additional method, `Vue.navigate(path, [trigger])`. [trigger] is a boolean (defaults to true) that will `pushState` if true, `replaceState` otherwise.
+
 * The router will emit events on your $root VM: `routing:started`, `routing:beforeUpdate`, `routing:afterUpdate`.
-* You can pass a `broadcast` boolean. If set to true, the events will be emitted using the $root `$broadcast` method, so all child VMs will receive the event until a handler `return false;`. If false, it uses `$emit`. Defaults to `false`.
-* You can pass a `debug` boolean to activate logging from the directive.
-* `keep-alive` works the same way than with `v-component`.
+* You can pass a `options` hash to pass configuration to the router:
+    * `hashbang` boolean (defaults to false) to use '#!' urls
+    * `click` boolean (defaults to true) to automatically bind all click to the router. Not that if `false`, you will need to explicitly call `Vue.navigate` method)
+    * `base` string (defaults to '/') to specify the base path
+    * `broadcast` boolean (defaults to false) if true the events will be emitted using the $root `$broadcast` method, so all child VMs will receive the event until a handler `return false;`. If false, it uses `$emit`.
+    * `debug` boolean (defaults to false) to activate logging from the directive.
 
 ## Location context
 When the router emits an event, 2 parameters are passed: `location` and `oldLocation`. Like in Angular, it is an object containing some useful properties:
 * regexp: the route regexp, such as `/items/:itemId`
 * path: the current path, such as `/items/razor/`
 * params: a hash of the params from the route, here `{item: 'razor'}`
-* componentId: the componentId associated to the current route
-
-## Todo
-* transition timing (out then in, in then out, ...)
+* componentId: the componentId associated to the current route

component.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-route",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "repository": "ayamflow/vue-route",
   "description": "Routing directive for Vue.js, inspired by ng-view.",
   "main": "src/index.js",
@@ -21,10 +21,10 @@
     "url": "https://github.com/ayamflow/vue-route/issues"
   },
   "dependencies": {
-    "visionmedia/page.js": "~1.3.7"
+    "visionmedia/page.js": "^1.5.0"
   },
   "development": {
-    "yyx990803/vue": "~0.11.0",
-    "substack/tape": "~3.0.2"
+    "yyx990803/vue": "^0.11.3",
+    "substack/tape": "^3.0.2"
   }
 }

package.json

@@ -1,10 +1,11 @@
 {
   "name": "vue-route",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Routing directive for Vue.js, inspired by ng-view.",
   "main": "src/index.js",
   "scripts": {
-    "test": "browserify test/index.js | testling"
+    "test": "browserify test/index.js | testling",
+    "test-browser": "beefy test/index.js:test/build.js --debug=false"
   },
   "repository": {
     "type": "git",
@@ -23,24 +24,24 @@
     "url": "https://github.com/ayamflow/vue-route/issues"
   },
   "devDependencies": {
+    "function-bind": "^1.0.2",
     "tape": "~3.0.2",
-    "vue": "~0.11.0",
-    "function-bind": "~1.0.2"
+    "vue": "~0.11.3"
   },
   "testling": {
-      "files": "test/index.js",
-      "browsers": [
-        "ie/9..latest",
-        "chrome/22..latest",
-        "firefox/16..latest",
-        "safari/latest",
-        "opera/11.0..latest",
-        "iphone/6",
-        "ipad/6",
-        "android-browser/latest"
-      ]
-    },
+    "files": "test/index.js",
+    "browsers": [
+      "ie/9..latest",
+      "chrome/22..latest",
+      "firefox/16..latest",
+      "safari/latest",
+      "opera/11.0..latest",
+      "iphone/6",
+      "ipad/6",
+      "android-browser/latest"
+    ]
+  },
   "dependencies": {
-    "page": "~1.3.7"
+    "page": "^1.5.0"
   }
 }

src/component-api.js

@@ -4,13 +4,12 @@ var utils = require('./utils'),
     page = require('page');
 
 module.exports = function(Vue) {
-    var component = require('./component-api')(Vue, page, utils),
-        directive = require('./directive-api')(Vue, page, utils),
-        route = require('./route-api')(Vue, page, utils),
-        _ = Vue.util;
-
-    var routeDefinition = {
+  var component = Vue.directive('component'),
+      overrides = require('./overrides')(Vue),
+      routing = require('./routing')(Vue, page, utils),
+      _ = Vue.util;
 
+    var routeDefinition = _.extend({
         isLiteral: true,
 
         // Vue event method, $emit or $broadcast
@@ -21,18 +20,27 @@ module.exports = function(Vue) {
         // Reference to $root.$options.routes
         routes: {},
 
+        // Options to be passed to the routing library
+        options: {
+          base: '/',
+          hashbang: false,
+          click: true
+        },
+
         // Location context, init (event with null) to avoid mutating it later (fast object)
         location: {
             regexp: null,
             path: null,
             componentId: null,
             params: null
         }
-    };
+    }, component);
+
+    // Extend the routing-related methods
+    _.extend(routeDefinition, routing);
 
-    _.extend(routeDefinition, component); // Add methods from custom component directive
-    _.extend(routeDefinition, directive); // Add directive lifecycle methods
-    _.extend(routeDefinition, route); // Add routing methods
+    // override some of components methods
+    _.extend(routeDefinition, overrides);
 
     Vue.directive('route', routeDefinition);
 };