fix(TabBar): route matching in special cases (#10447)

src/tabbar-item/index.js

@@ -32,19 +32,22 @@ export default createComponent({
   },
 
   computed: {
-    routeMatched() {
+    active() {
-      const { to, $route } = this;
+      const routeMode = this.parent.route;
-      if (to && $route) {
+
+      if (routeMode && '$route' in this) {
+        const { to, $route } = this;
         const config = isObject(to) ? to : { path: to };
-        return !!$route.matched.find(r =>{
+        return !!$route.matched.find((r) => {
-          const pathMatched = config.path === r.path;
+          // vue-router 3.x $route.matched[0].path is empty in / and its children paths
+          const path = r.path === '' ? '/' : r.path;
+          const pathMatched = config.path === path;
           const nameMatched = isDef(config.name) && config.name === r.name;
           return pathMatched || nameMatched;
-        })
+        });
       }
-    },
+
-    active() {
+      return this.nameMatched;
-      return this.parent.route ? this.routeMatched : this.nameMatched;
     },
   },
 

src/tabbar/index.js

@@ -69,7 +69,7 @@ export default createComponent({
   methods: {
     setActiveItem() {
       this.children.forEach((item, index) => {
-        item.nameMatched = (item.name || index) === this.value;
+        item.nameMatched = item.name === this.value || index === this.value;
       });
     },
 

src/tabbar/test/__snapshots__/index.spec.js.snap

@@ -10,7 +10,7 @@ exports[`placeholder prop 1`] = `
 
 exports[`route mode 1`] = `
 <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-  <div class="van-tabbar-item">
+  <div class="van-tabbar-item van-tabbar-item--active">
     <div class="van-tabbar-item__icon">
       <!---->
     </div>