From 643003b43c49648e53aec3e50759ecf219781028 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 19 Aug 2019 11:27:05 +0800
Subject: [PATCH] [new feature] Tabbar: support match route by to.name (#4148)

---
 src/tabbar-item/index.js                      |  4 +-
 .../test/__snapshots__/index.spec.js.snap     | 42 +++++++++++++++++++
 src/tabbar/test/index.spec.js                 | 34 +++++++++++++++
 3 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index 01eadb653..9339a2ac4 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -27,8 +27,8 @@ export default createComponent({
     routeActive() {
       const { to, $route } = this;
       if (to && $route) {
-        const path = isObj(to) ? to.path : to;
-        return $route.path === path;
+        const config = isObj(to) ? to : { path: to };
+        return config.path === $route.path || config.name === $route.name;
       }
     }
   },
diff --git a/src/tabbar/test/__snapshots__/index.spec.js.snap b/src/tabbar/test/__snapshots__/index.spec.js.snap
index c89f60f1b..87acd4d81 100644
--- a/src/tabbar/test/__snapshots__/index.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/index.spec.js.snap
@@ -113,6 +113,48 @@ exports[`route mode 3`] = `
 </div>
 `;
 
+exports[`route mode match by name 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>
+`;
+
+exports[`route mode match by name 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>
+`;
+
 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">
diff --git a/src/tabbar/test/index.spec.js b/src/tabbar/test/index.spec.js
index e5edbf7c3..921031a4e 100644
--- a/src/tabbar/test/index.spec.js
+++ b/src/tabbar/test/index.spec.js
@@ -44,6 +44,40 @@ test('route mode', async () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('route mode match by name', async () => {
+  const Foo = { render: () => 'Foo' };
+  const Bar = { render: () => 'Bar' };
+  const router = new VueRouter({
+    routes: [
+      { path: '/foo', component: Foo, name: 'foo' },
+      { path: '/bar', component: Bar, name: 'bar' }
+    ]
+  });
+
+  const wrapper = mount({
+    router,
+    template: `
+      <van-tabbar route>
+        <van-tabbar-item :to="{ name: 'foo' }">
+          Tab
+        </van-tabbar-item>
+        <van-tabbar-item :to="{ name: 'bar' }">
+          Tab
+        </van-tabbar-item>
+      </van-tabbar>
+    `
+  });
+
+  const items = wrapper.findAll('.van-tabbar-item');
+  items.at(0).trigger('click');
+  await later();
+  expect(wrapper).toMatchSnapshot();
+
+  items.at(1).trigger('click');
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('router NavigationDuplicated', async done => {
   expect(async () => {
     const router = new VueRouter();