fix(Tabbar): before-change not work in route mode (#9856)

* fix(Tabbar): before-change not work in route mode

* fix: upd

* test: add test case

package.json

@@ -5,6 +5,7 @@
     "dev": "pnpm dev --dir ./packages/vant",
     "lint": "pnpm lint --dir ./packages/vant",
     "test": "pnpm test --dir ./packages/vant",
+    "test:watch": "pnpm test:watch --dir ./packages/vant",
     "build": "pnpm build --dir ./packages/vant",
     "build:site": "pnpm build:site --dir ./packages/vant"
   },

packages/vant/src/tabbar-item/TabbarItem.tsx

@@ -63,13 +63,14 @@ export default defineComponent({
         return pathMatched || nameMatched;
       }
 
-      return (props.name || index.value) === modelValue;
+      return (props.name ?? index.value) === modelValue;
     });
 
     const onClick = (event: MouseEvent) => {
-      parent.setActive(props.name ?? index.value);
+      if (!active.value) {
+        parent.setActive(props.name ?? index.value, route);
+      }
       emit('click', event);
-      route();
     };
 
     const renderIcon = () => {

packages/vant/src/tabbar/Tabbar.tsx

@@ -44,7 +44,7 @@ export type TabbarProps = ExtractPropTypes<typeof tabbarProps>;
 
 export type TabbarProvide = {
   props: TabbarProps;
-  setActive: (active: number | string) => void;
+  setActive: (active: number | string, afterChange: () => void) => void;
 };
 
 export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol(name);
@@ -83,16 +83,15 @@ export default defineComponent({
       );
     };
 
-    const setActive = (active: number | string) => {
-      if (active !== props.modelValue) {
-        callInterceptor(props.beforeChange, {
-          args: [active],
-          done() {
-            emit('update:modelValue', active);
-            emit('change', active);
-          },
-        });
-      }
+    const setActive = (active: number | string, afterChange: () => void) => {
+      callInterceptor(props.beforeChange, {
+        args: [active],
+        done() {
+          emit('update:modelValue', active);
+          emit('change', active);
+          afterChange();
+        },
+      });
     };
 
     linkChildren({ props, setActive });

packages/vant/src/tabbar/test/index.spec.tsx

@@ -69,6 +69,34 @@ test('should match active tab by route path in route mode', async () => {
   expect(items[3].classes()).not.toContain(activeClass);
 });
 
+test('should allow to use before-change prop in route mode', async () => {
+  const wrapper = mount(
+    {
+      render: () => (
+        <Tabbar route beforeChange={() => false}>
+          <TabbarItem replace to="/">
+            Tab
+          </TabbarItem>
+          <TabbarItem replace to="/search">
+            Tab
+          </TabbarItem>
+        </Tabbar>
+      ),
+    },
+    {
+      global: {
+        mocks: getMockRouter(),
+      },
+    }
+  );
+
+  const items = wrapper.findAll('.van-tabbar-item');
+  expect(items[0].classes()).toContain(activeClass);
+
+  await items[1].trigger('click');
+  expect(items[1].classes()).not.toContain(activeClass);
+});
+
 test('should match active tab by route name in route mode', async () => {
   const wrapper = mount(
     {