diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 50cd57879..4becf6a98 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -143,6 +143,7 @@
 
 ### Tabbar
 
+- 新增`route`属性
 - 新增`inactive-color`属性
 
 ### TreeSelect
diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.js
index dd86de430..ec5d63b51 100644
--- a/packages/tabbar-item/index.js
+++ b/packages/tabbar-item/index.js
@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, isObj } from '../utils';
 import Icon from '../icon';
 import Info from '../info';
 import { route, routeProps } from '../utils/router';
@@ -22,6 +22,16 @@ export default sfc({
     };
   },
 
+  computed: {
+    routeActive() {
+      const { to, $route } = this;
+      if (to && $route) {
+        const path = isObj(to) ? to.path : to;
+        return $route.path === path;
+      }
+    }
+  },
+
   methods: {
     onClick(event) {
       this.parent.onChange(this.index);
@@ -31,7 +41,8 @@ export default sfc({
   },
 
   render(h) {
-    const { icon, slots, active } = this;
+    const { icon, slots } = this;
+    const active = this.parent.route ? this.routeActive : this.active;
     const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
 
     return (
diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md
index 1b4938a8b..4266fd40f 100644
--- a/packages/tabbar/en-US.md
+++ b/packages/tabbar/en-US.md
@@ -89,6 +89,29 @@ export default {
 </van-tabbar>
 ```
 
+#### Route Mode
+
+```html
+<router-view />
+
+<van-tabbar route>
+  <van-tabbar-item
+    replace
+    to="/home"
+    icon="home-o"
+  >
+    Tab
+  </van-tabbar-item>
+  <van-tabbar-item
+    replace
+    to="/search"
+    icon="search"
+  >
+    Tab
+  </van-tabbar-item>
+</van-tabbar>
+```
+
 ### Tabbar Props
 
 | Attribute | Description | Type | Default |
@@ -98,6 +121,7 @@ export default {
 | z-index | Z-index | `Number` | `1` |
 | active-color | Color of active tab item | `String` | `#1989fa` |
 | inactive-color | Color of inactive tab item | `String` | `#7d7e80` |
+| route | Whether to enable route mode | `Boolean` | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
 
 ### Tabbar Events
diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js
index 90f37eb58..5261dae7b 100644
--- a/packages/tabbar/index.js
+++ b/packages/tabbar/index.js
@@ -8,6 +8,7 @@ export default sfc({
 
   props: {
     value: Number,
+    route: Boolean,
     activeColor: String,
     inactiveColor: String,
     safeAreaInsetBottom: Boolean,
diff --git a/packages/tabbar/test/__snapshots__/index.spec.js.snap b/packages/tabbar/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..0dd9075b3
--- /dev/null
+++ b/packages/tabbar/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`route mode 1`] = `
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+  <div class="van-tabbar-item van-tabbar-item--active">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+</div>
+`;
+
+exports[`route mode 2`] = `
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item van-tabbar-item--active">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+</div>
+`;
+
+exports[`route mode 3`] = `
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item van-tabbar-item--active">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">
+      Tab
+    </div>
+  </div>
+</div>
+`;
+
+exports[`watch tabbar value 1`] = `
+<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+  <div class="van-tabbar-item">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">Tab</div>
+  </div>
+  <div class="van-tabbar-item van-tabbar-item--active">
+    <div class="van-tabbar-item__icon">
+      <!---->
+    </div>
+    <div class="van-tabbar-item__text">Tab</div>
+  </div>
+</div>
+`;
diff --git a/packages/tabbar/test/index.spec.js b/packages/tabbar/test/index.spec.js
new file mode 100644
index 000000000..4ae7219c2
--- /dev/null
+++ b/packages/tabbar/test/index.spec.js
@@ -0,0 +1,90 @@
+import { mount, later } from '../../../test/utils';
+import Vue from 'vue';
+import Tabbar from '..';
+import TabbarItem from '../../tabbar-item';
+
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
+
+test('route mode', async () => {
+  Vue.util.defineReactive(Vue.prototype, '$route', { path: '/home' });
+
+  Vue.prototype.$router = {
+    replace(to) {
+      Vue.prototype.$route.path = typeof to === 'string' ? to : to.path;
+    }
+  };
+
+  const wrapper = mount({
+    template: `
+      <van-tabbar route>
+        <van-tabbar-item replace to="/home">
+          Tab
+        </van-tabbar-item>
+        <van-tabbar-item replace to="/search">
+          Tab
+        </van-tabbar-item>
+        <van-tabbar-item replace :to="{ path: '/star' }">
+          Tab
+        </van-tabbar-item>
+        <van-tabbar-item>
+          Tab
+        </van-tabbar-item>
+      </van-tabbar>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+
+  const items = wrapper.findAll('.van-tabbar-item');
+
+  items.at(1).trigger('click');
+  await later();
+  expect(wrapper).toMatchSnapshot();
+
+  items.at(2).trigger('click');
+  items.at(3).trigger('click');
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
+
+
+test('watch tabbar value', () => {
+  const wrapper = mount({
+    template: `
+      <van-tabbar :value="value">
+        <van-tabbar-item>Tab</van-tabbar-item>
+        <van-tabbar-item>Tab</van-tabbar-item>
+      </van-tabbar>
+    `,
+    data() {
+      return {
+        value: 0
+      };
+    }
+  });
+
+  wrapper.setData({ value: 1 });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('click event', () => {
+  const onClick = jest.fn();
+  const onChange = jest.fn();
+
+  const wrapper = mount({
+    template: `
+      <van-tabbar @change="onChange">
+        <van-tabbar-item @click="onClick">Tab</van-tabbar-item>
+      </van-tabbar>
+    `,
+    methods: {
+      onClick,
+      onChange
+    }
+  });
+
+  wrapper.find('.van-tabbar-item').trigger('click');
+  expect(onClick).toHaveBeenCalledTimes(1);
+  expect(onChange).toHaveBeenCalledTimes(0);
+});
diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md
index e54c30101..4edd12313 100644
--- a/packages/tabbar/zh-CN.md
+++ b/packages/tabbar/zh-CN.md
@@ -89,6 +89,31 @@ export default {
 </van-tabbar>
 ```
 
+#### 路由模式
+
+标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
+
+```html
+<router-view />
+
+<van-tabbar route>
+  <van-tabbar-item
+    replace
+    to="/home"
+    icon="home-o"
+  >
+    标签
+  </van-tabbar-item>
+  <van-tabbar-item
+    replace
+    to="/search"
+    icon="search"
+  >
+    标签
+  </van-tabbar-item>
+</van-tabbar>
+```
+
 ### Tabbar Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -98,6 +123,7 @@ export default {
 | z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
 | active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |
 | inactive-color | 未选中标签的颜色 | `String` | `#7d7e80` | 2.0.0 |
+| route | 是否开启路由模式 | `Boolean` | `false` | 2.0.0 |
 | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 
 ### Tabbar Events