From c7031fb291c9a05400255d155e9c6a706a455e30 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 10 Nov 2017 09:56:46 -0600
Subject: [PATCH] [new feature] Tab support vue-router (#305)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router
---
 docs/examples-docs/en-US/tabbar.md |  3 +++
 docs/examples-docs/zh-CN/tabbar.md |  3 +++
 packages/cell/index.vue            | 14 ++++----------
 packages/mixins/router-link.js     | 22 ++++++++++++++++++++++
 packages/tabbar-item/index.vue     |  4 ++++
 5 files changed, 36 insertions(+), 10 deletions(-)
 create mode 100644 packages/mixins/router-link.js

diff --git a/docs/examples-docs/en-US/tabbar.md b/docs/examples-docs/en-US/tabbar.md
index f0f4f6f01..4894d7270 100644
--- a/docs/examples-docs/en-US/tabbar.md
+++ b/docs/examples-docs/en-US/tabbar.md
@@ -97,3 +97,6 @@ export default {
 | icon | Icon name | `String` | - | Names from Icon Component |
 | dot | Whether to show red dot | `Boolean` | - | - |
 | info | Info message | `String` | - | - |
+| url | Link | `String` | - | - |
+| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
+| replace | If true, the navigation will not leave a history record | `String` | `false` | - |
diff --git a/docs/examples-docs/zh-CN/tabbar.md b/docs/examples-docs/zh-CN/tabbar.md
index 355afc6ab..0a680de40 100644
--- a/docs/examples-docs/zh-CN/tabbar.md
+++ b/docs/examples-docs/zh-CN/tabbar.md
@@ -109,3 +109,6 @@ export default {
 | icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
 | dot | 是否显示小红点 | `Boolean` | - | - |
 | info | 图标右上角提示信息 | `String` | - | - |
+| url | 跳转链接 | `String` | - | - |
+| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
+| replace | 跳转时是否替换当前 history | `String` | `false` | - |
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index 980387969..a3418d893 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -30,36 +30,30 @@
 
 <script>
 import Icon from '../icon';
+import RouterLink from '../mixins/router-link';
 
 export default {
   name: 'van-cell',
 
+  mixins: [RouterLink],
+
   components: {
     [Icon.name]: Icon
   },
 
   props: {
-    url: String,
     icon: String,
     title: String,
     label: String,
     isLink: Boolean,
-    replace: Boolean,
     required: Boolean,
-    to: [String, Object],
     value: [String, Number]
   },
 
   methods: {
     onClick() {
       this.$emit('click');
-
-      const { to, url, $router, replace } = this;
-      if (to && $router) {
-        $router[replace ? 'replace' : 'push'](to);
-      } else if (url) {
-        replace ? location.replace(url) : location.href = url;
-      }
+      this.routerLink();
     }
   }
 };
diff --git a/packages/mixins/router-link.js b/packages/mixins/router-link.js
new file mode 100644
index 000000000..3cd41b170
--- /dev/null
+++ b/packages/mixins/router-link.js
@@ -0,0 +1,22 @@
+/**
+ * add Vue-Router support
+ */
+
+export default {
+  props: {
+    url: String,
+    replace: Boolean,
+    to: [String, Object]
+  },
+
+  methods: {
+    routerLink() {
+      const { to, url, $router, replace } = this;
+      if (to && $router) {
+        $router[replace ? 'replace' : 'push'](to);
+      } else if (url) {
+        replace ? location.replace(url) : location.href = url;
+      }
+    }
+  }
+};
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
index 122c3062f..2d1272934 100644
--- a/packages/tabbar-item/index.vue
+++ b/packages/tabbar-item/index.vue
@@ -14,10 +14,13 @@
 
 <script>
 import Icon from '../icon';
+import RouterLink from '../mixins/router-link';
 
 export default {
   name: 'van-tabbar-item',
 
+  mixins: [RouterLink],
+
   components: {
     [Icon.name]: Icon
   },
@@ -45,6 +48,7 @@ export default {
   methods: {
     onClick() {
       this.$parent.onChange(this.$parent.items.indexOf(this));
+      this.routerLink();
     }
   }
 };