[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

@@ -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` | - |

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` | - |

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

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;
+      }
+    }
+  }
+};

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