v0.4.0 - change event API like vue-router

README.md

@@ -56,10 +56,19 @@ App.vue
 functions: [ `on` | `once` | `off` ]
 
 event types: [ `forward` | `back` | `refresh` | `reset` ]
+
+parameter( `to` | `from` ) properties:
+- name
+  - type: string
+  - desc: name of the component corresponding to the route
+- route:
+  - type: object
+  - desc: vue-route`s route object
+
 ```javascript
-this.$navigation.on('forward', (from, to) => {})
-this.$navigation.once('back', (from, to) => {})
-this.$navigation.off('refresh', (current) => {})
+this.$navigation.on('forward', (to, from) => {})
+this.$navigation.once('back', (to, from) => {})
+this.$navigation.off('refresh', (to, from) => {})
 this.$navigation.on('reset', () => {})
 ```
 

README_CN.md

@@ -54,10 +54,19 @@ App.vue
 方法: [ `on` | `once` | `off` ]
 
 事件类型: [ `forward` | `back` | `refresh` | `reset` ]
+
+参数( `to` | `from` ) 的属性:
+- name
+  - 类型: string
+  - 描述: 与路由对应的组件的名称
+- route:
+  - 类型: object
+  - 描述: vue-route的路由信息对象
+
 ```javascript
-this.$navigation.on('forward', (from, to) => {})
-this.$navigation.once('back', (from, to) => {})
-this.$navigation.off('refresh', (current) => {})
+this.$navigation.on('forward', (to, from) => {})
+this.$navigation.once('back', (to, from) => {})
+this.$navigation.off('refresh', (to, from) => {})
 this.$navigation.on('reset', () => {})
 ```
 

dist/vue-navigation.esm.js

@@ -1,5 +1,5 @@
 /**
-* vue-navigation v0.3.0
+* vue-navigation v0.4.0
 * https://github.com/zack24q/vue-navigation
 * Released under the MIT License.
 */
@@ -36,50 +36,66 @@ var Navigator = function (bus, store, moduleName) {
     });
   }
 
-  var forward = function (name) {
-    var from, to;
+  var forward = function (name, toRoute, fromRoute) {
+    var to = {
+      route: toRoute
+    };
+    var from = {
+      route: fromRoute
+    };
     if (store) {
       var r = store.state.routes;
-      from = r[r.length - 1];
+      from.name = r[r.length - 1];
       store.commit('navigation/FORWARD', name);
-      to = r[r.length - 1];
+      to.name = r[r.length - 1];
     } else {
-      from = Routes[Routes.length - 1];
+      from.name = Routes[Routes.length - 1];
       Routes.push(name);
-      to = Routes[Routes.length - 1];
+      to.name = Routes[Routes.length - 1];
     }
-    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(Routes);
     // if from does not exist, it will be set null
-    bus.$emit('forward', from || null, to);
-    development ? console.info(("navigation: forward from " + from + " to " + to)) : null;
+    from.name = from.name || null;
+    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(Routes);
+    bus.$emit('forward', to, from);
+    development ? console.info('navigation: forward to ', to, ' from ', from) : null;
   };
-  var back = function (count) {
-    var from, to;
+  var back = function (count, toRoute, fromRoute) {
+    var to = {
+      route: toRoute
+    };
+    var from = {
+      route: fromRoute
+    };
     if (store) {
       var r = store.state.routes;
-      from = r[r.length - 1];
+      from.name = r[r.length - 1];
       store.commit('navigation/BACK', count);
-      to = r[r.length - 1];
+      to.name = r[r.length - 1];
     } else {
-      from = Routes[Routes.length - 1];
+      from.name = Routes[Routes.length - 1];
       Routes.splice(Routes.length - count, count);
-      to = Routes[Routes.length - 1];
+      to.name = Routes[Routes.length - 1];
     }
     window.sessionStorage.VUE_NAVIGATION = JSON.stringify(Routes);
-    bus.$emit('back', from, to);
-    development ? console.info(("navigation: back from " + from + " to " + to)) : null;
+    bus.$emit('back', to, from);
+    development ? console.info('navigation: back to ', to, ' from ', from) : null;
   };
-  var refresh = function () {
-    var current;
+  var refresh = function (toRoute, fromRoute) {
+    var to = {
+      route: toRoute
+    };
+    var from = {
+      route: fromRoute
+    };
     if (store) {
       var r = store.state.routes;
-      current = r[r.length - 1];
+      from.name = to.name = r[r.length - 1];
       store.commit('navigation/REFRESH');
     } else {
-      current = Routes[Routes.length - 1];
+      from.name = to.name = Routes[Routes.length - 1];
     }
-    bus.$emit('refresh', current);
-    development ? console.info(("navigation: refresh " + current)) : null;
+    bus.$emit('refresh', to, from);
+    development ? console.info('navigation: refresh to ', to, ' from ', from) : null;
   };
   var reset = function () {
     store ? store.commit('navigation/RESET') : Routes.splice(0, Routes.length);
@@ -88,14 +104,14 @@ var Navigator = function (bus, store, moduleName) {
     development ? console.info('navigation: reset') : null;
   };
 
-  var record = function (name) {
+  var record = function (name, toRoute, fromRoute) {
     var toIndex = Routes.lastIndexOf(name);
     if (toIndex === -1) {
-      forward(name);
+      forward(name, toRoute, fromRoute);
     } else if (toIndex === Routes.length - 1) {
-      refresh();
+      refresh(toRoute, fromRoute);
     } else {
-      back(Routes.length - 1 - toIndex);
+      back(Routes.length - 1 - toIndex, toRoute, fromRoute);
     }
   };
 
@@ -163,11 +179,11 @@ var index = {
     });
 
     // handle router change
-    router.afterEach(function (to) {
+    router.afterEach(function (to, from) {
       var matched = to.matched[0];
       if (matched && matched.components) {
         var component = matched.components.default;
-        navigator.record(component.name);
+        navigator.record(component.name, to, from);
       }
     });
 

dist/vue-navigation.umd.js

@@ -1,5 +1,5 @@
 /**
-* vue-navigation v0.3.0
+* vue-navigation v0.4.0
 * https://github.com/zack24q/vue-navigation
 * Released under the MIT License.
 */
@@ -42,50 +42,66 @@ var Navigator = function (bus, store, moduleName) {
     });
   }
 
-  var forward = function (name) {
-    var from, to;
+  var forward = function (name, toRoute, fromRoute) {
+    var to = {
+      route: toRoute
+    };
+    var from = {
+      route: fromRoute
+    };
     if (store) {
       var r = store.state.routes;
-      from = r[r.length - 1];
+      from.name = r[r.length - 1];
       store.commit('navigation/FORWARD', name);
-      to = r[r.length - 1];
+      to.name = r[r.length - 1];
     } else {
-      from = Routes[Routes.length - 1];
+      from.name = Routes[Routes.length - 1];
       Routes.push(name);
-      to = Routes[Routes.length - 1];
+      to.name = Routes[Routes.length - 1];
     }
-    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(Routes);
     // if from does not exist, it will be set null
-    bus.$emit('forward', from || null, to);
-    development ? console.info(("navigation: forward from " + from + " to " + to)) : null;
+    from.name = from.name || null;
+    window.sessionStorage.VUE_NAVIGATION = JSON.stringify(Routes);
+    bus.$emit('forward', to, from);
+    development ? console.info('navigation: forward to ', to, ' from ', from) : null;
   };
-  var back = function (count) {
-    var from, to;
+  var back = function (count, toRoute, fromRoute) {
+    var to = {
+      route: toRoute
+    };
+    var from = {
+      route: fromRoute
+    };
     if (store) {
       var r = store.state.routes;
-      from = r[r.length - 1];
+      from.name = r[r.length - 1];
       store.commit('navigation/BACK', count);
-      to = r[r.length - 1];
+      to.name = r[r.length - 1];
     } else {
-      from = Routes[Routes.length - 1];
+      from.name = Routes[Routes.length - 1];
       Routes.splice(Routes.length - count, count);
-      to = Routes[Routes.length - 1];
+      to.name = Routes[Routes.length - 1];
     }
     window.sessionStorage.VUE_NAVIGATION = JSON.stringify(Routes);
-    bus.$emit('back', from, to);
-    development ? console.info(("navigation: back from " + from + " to " + to)) : null;
+    bus.$emit('back', to, from);
+    development ? console.info('navigation: back to ', to, ' from ', from) : null;
   };
-  var refresh = function () {
-    var current;
+  var refresh = function (toRoute, fromRoute) {
+    var to = {
+      route: toRoute
+    };
+    var from = {
+      route: fromRoute
+    };
     if (store) {
       var r = store.state.routes;
-      current = r[r.length - 1];
+      from.name = to.name = r[r.length - 1];
       store.commit('navigation/REFRESH');
     } else {
-      current = Routes[Routes.length - 1];
+      from.name = to.name = Routes[Routes.length - 1];
     }
-    bus.$emit('refresh', current);
-    development ? console.info(("navigation: refresh " + current)) : null;
+    bus.$emit('refresh', to, from);
+    development ? console.info('navigation: refresh to ', to, ' from ', from) : null;
   };
   var reset = function () {
     store ? store.commit('navigation/RESET') : Routes.splice(0, Routes.length);
@@ -94,14 +110,14 @@ var Navigator = function (bus, store, moduleName) {
     development ? console.info('navigation: reset') : null;
   };
 
-  var record = function (name) {
+  var record = function (name, toRoute, fromRoute) {
     var toIndex = Routes.lastIndexOf(name);
     if (toIndex === -1) {
-      forward(name);
+      forward(name, toRoute, fromRoute);
     } else if (toIndex === Routes.length - 1) {
-      refresh();
+      refresh(toRoute, fromRoute);
     } else {
-      back(Routes.length - 1 - toIndex);
+      back(Routes.length - 1 - toIndex, toRoute, fromRoute);
     }
   };
 
@@ -169,11 +185,11 @@ var index = {
     });
 
     // handle router change
-    router.afterEach(function (to) {
+    router.afterEach(function (to, from) {
       var matched = to.matched[0];
       if (matched && matched.components) {
         var component = matched.components.default;
-        navigator.record(component.name);
+        navigator.record(component.name, to, from);
       }
     });
 

docs/examples/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0"><title>examples</title><link href=./static/css/app.172d045cc07af344a79b1a326ea5ac7f.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3391d4367d9aea6f634c.js></script><script type=text/javascript src=./static/js/app.5e9c54e3178bc9c0a571.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0"><title>examples</title><link href=./static/css/app.172d045cc07af344a79b1a326ea5ac7f.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.96afebb5a6545d5e71b6.js></script><script type=text/javascript src=./static/js/app.990346a9661c0f47ceac.js></script></body></html>