v0.1.3

README.md

@@ -1,7 +1,5 @@
 # vue-navigation
 
-## ！目前只支持最简单的路由方式（路由地址必须与组件一一对应），复杂的路由方式正在支持中
-
 > 必须配合 [vue](https://github.com/vuejs/vue)`2.x` 与 [vue-router](https://github.com/vuejs/vue-router)`2.x` 一起使用
 
 导航默认行为类似手机APP的页面导航（A、B、C为页面）：
@@ -13,7 +11,9 @@
 
 ### 在线演示
 
-[地址](https://zack24q.github.io/vue-navigation/examples/)
+[演示地址](https://zack24q.github.io/vue-navigation/examples/)
+
+[代码地址](https://github.com/zack24q/vue-navigation/tree/master/examples)
 
 ## 安装
 
@@ -23,6 +23,8 @@ npm i -S vue-navigation
 
 ## 使用
 
+### 基础使用
+
 main.js
 
 ```javascript
@@ -66,6 +68,3 @@ Vue.use(Navigation, {router, store})
 ```javascript
 Vue.use(Navigation, {router, store, moduleName: 'name'})
 ```
-
-## 完整示例
-使用vue-cli的官方webpack模板生成 [地址](https://github.com/zack24q/vue-navigation/tree/master/examples)

build/rollup.config.js

@@ -1,4 +1,5 @@
 const version = require('../package.json').version
+const buble = require('rollup-plugin-buble')
 const progress = require('rollup-plugin-progress')
 const filesize = require('rollup-plugin-filesize')
 
@@ -12,7 +13,8 @@ const banner = `/**
 const config = {}
 config.entry = {
   entry: 'src/index.js',
-  plugins: [progress(), filesize()]
+  plugins: [
+    buble(), progress(), filesize()]
 }
 config.bundles = [{
   banner: banner,

dist/vue-navigation.esm.js

@@ -17,7 +17,9 @@ var development = process.env.NODE_ENV === 'development';
 var Navigator = function (store, moduleName) {
   if (store) {
     store.registerModule(moduleName, {
-      state: {routes: Routes},
+      state: {
+        routes: Routes
+      },
       mutations: {
         'navigation/FORWARD': function (state, name) {
           state.routes.push(name);
@@ -46,7 +48,7 @@ var Navigator = function (store, moduleName) {
     development ? console.info('navigation: refresh') : null;
   };
 
-  var jumpTo = function (name) {
+  var go = function (name) {
     var toIndex = Routes.lastIndexOf(name);
     if (toIndex === -1) {
       forward(name);
@@ -58,24 +60,22 @@ var Navigator = function (store, moduleName) {
   };
 
   return {
-    jumpTo: jumpTo
+    go: go
   }
 };
 
 var NavComponent = {
   name: 'navigation',
   props: {},
-  data: function () {
-    return {
-      routes: Routes
-    }
-  },
+  data: function () { return ({
+    routes: Routes
+  }); },
   computed: {
-    historyStr: function () {
+    historyStr: function historyStr () {
       return this.routes.join(',')
     }
   },
-  render: function (createElement) {
+  render: function render (createElement) {
     return createElement(
       'keep-alive',
       {props: {include: this.historyStr}},
@@ -85,24 +85,22 @@ var NavComponent = {
 };
 
 var index = {
-  install: function (Vue, options) {
-    if (!options) {
-      console.error('navigation need options');
-      return
-    }
-    if (!options.router) {
-      console.error('navigation need options.router');
+  install: function (Vue, ref) {
+    if ( ref === void 0 ) ref = {};
+    var router = ref.router;
+    var store = ref.store;
+    var moduleName = ref.moduleName; if ( moduleName === void 0 ) moduleName = 'navigation';
+
+    if (!router) {
+      console.error('vue-navigation need options: router');
       return
     }
-    var router = options.router;
-    var store = options.store;
-    var moduleName = options.moduleName || 'navigation';
 
     var navigator = new Navigator(store, moduleName);
 
     // init page name
     router.beforeEach(function (to, from, next) {
-      var matched = to.matched[to.matched.length - 1];
+      var matched = to.matched[0];
       if (matched) {
         var component = matched.components.default;
         component.name = component.name || 'anonymous-component-' + matched.path;
@@ -112,19 +110,17 @@ var index = {
 
     // handle router change
     router.afterEach(function (to, from) {
-      var matched = to.matched[to.matched.length - 1];
+      var matched = to.matched[0];
       if (matched) {
-        var component = to.matched[to.matched.length - 1].components.default;
-        navigator.jumpTo(component.name);
+        var component = matched.components.default;
+        navigator.go(component.name);
       }
     });
 
     Vue.component('navigation', NavComponent);
 
     Vue.navigation = Vue.prototype.$navigation = {
-      getRoutes: function () {
-        return Routes.slice()
-      }
+      getRoutes: function () { return Routes.slice(); }
     };
   }
 };

dist/vue-navigation.umd.js

@@ -23,7 +23,9 @@ var development = process.env.NODE_ENV === 'development';
 var Navigator = function (store, moduleName) {
   if (store) {
     store.registerModule(moduleName, {
-      state: {routes: Routes},
+      state: {
+        routes: Routes
+      },
       mutations: {
         'navigation/FORWARD': function (state, name) {
           state.routes.push(name);
@@ -52,7 +54,7 @@ var Navigator = function (store, moduleName) {
     development ? console.info('navigation: refresh') : null;
   };
 
-  var jumpTo = function (name) {
+  var go = function (name) {
     var toIndex = Routes.lastIndexOf(name);
     if (toIndex === -1) {
       forward(name);
@@ -64,24 +66,22 @@ var Navigator = function (store, moduleName) {
   };
 
   return {
-    jumpTo: jumpTo
+    go: go
   }
 };
 
 var NavComponent = {
   name: 'navigation',
   props: {},
-  data: function () {
-    return {
-      routes: Routes
-    }
-  },
+  data: function () { return ({
+    routes: Routes
+  }); },
   computed: {
-    historyStr: function () {
+    historyStr: function historyStr () {
       return this.routes.join(',')
     }
   },
-  render: function (createElement) {
+  render: function render (createElement) {
     return createElement(
       'keep-alive',
       {props: {include: this.historyStr}},
@@ -91,24 +91,22 @@ var NavComponent = {
 };
 
 var index = {
-  install: function (Vue, options) {
-    if (!options) {
-      console.error('navigation need options');
-      return
-    }
-    if (!options.router) {
-      console.error('navigation need options.router');
+  install: function (Vue, ref) {
+    if ( ref === void 0 ) ref = {};
+    var router = ref.router;
+    var store = ref.store;
+    var moduleName = ref.moduleName; if ( moduleName === void 0 ) moduleName = 'navigation';
+
+    if (!router) {
+      console.error('vue-navigation need options: router');
       return
     }
-    var router = options.router;
-    var store = options.store;
-    var moduleName = options.moduleName || 'navigation';
 
     var navigator = new Navigator(store, moduleName);
 
     // init page name
     router.beforeEach(function (to, from, next) {
-      var matched = to.matched[to.matched.length - 1];
+      var matched = to.matched[0];
       if (matched) {
         var component = matched.components.default;
         component.name = component.name || 'anonymous-component-' + matched.path;
@@ -118,19 +116,17 @@ var index = {
 
     // handle router change
     router.afterEach(function (to, from) {
-      var matched = to.matched[to.matched.length - 1];
+      var matched = to.matched[0];
       if (matched) {
-        var component = to.matched[to.matched.length - 1].components.default;
-        navigator.jumpTo(component.name);
+        var component = matched.components.default;
+        navigator.go(component.name);
       }
     });
 
     Vue.component('navigation', NavComponent);
 
     Vue.navigation = Vue.prototype.$navigation = {
-      getRoutes: function () {
-        return Routes.slice()
-      }
+      getRoutes: function () { return Routes.slice(); }
     };
   }
 };

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.79e20122fabfae682d9c08216e81aaf7.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.730188a0f962795254bc.js></script><script type=text/javascript src=./static/js/app.4c4a2d88c70c4a90be0c.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.79e20122fabfae682d9c08216e81aaf7.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.c6c37f44e6840e1770a6.js></script><script type=text/javascript src=./static/js/app.7c6972d2f25fb75207e5.js></script></body></html>