Vant Tabbar的图标怎么在点击时保持选中状态？

你这个问题主要是路由匹配和选中状态绑定的问题。Vant 的 Tabbar 组件在使用 route 属性时，会根据当前的路由路径自动匹配对应的 TabbarItem 并设置选中状态。如果图标没有正确显示选中状态，大概率是路径匹配有问题。

先确认一下你的路由配置是不是严格按照 to 属性里写的路径来定义的。比如 to="/" 和 to="/search" 必须跟路由表里的 path 完全一致，不能多斜杠或者少斜杠，尤其是根路径 / 很容易出问题。

另外，Vant 默认是用路径精确匹配的逻辑，如果你用了嵌套路由或者动态路由参数，可能需要额外配置 route 的匹配规则。你可以试试手动指定 route 的匹配模式，改成这样：

<van-tabbar v-model="active">

  <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>

  <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>

</van-tabbar>

然后在你的 Vue 组件里定义一个 active 数据变量，并监听路由变化来更新它。比如：

export default {

  data() {

    return {

      active: 0

    };

  },

  watch: {

    $route(to) {

      if (to.path === '/') {

        this.active = 0;

      } else if (to.path === '/search') {

        this.active = 1;

      }

    }

  }

};

这种写法虽然稍微麻烦点，但能确保路径和选中状态完全同步。

最后提醒一句，开发者工具里看看实际渲染出来的路径到底对不对，有时候问题其实是在路由跳转上，而不是组件本身。我之前也踩过类似的坑，路径看着没问题，结果因为重定向或者默认子路由搞错了，浪费了不少时间。

你这个问题应该是组件无法正确识别当前路由导致的。Vant 的 Tabbar 组件在使用 route 属性时，会根据浏览器当前路径匹配 to 属性来自动设置激活状态。如果你的页面路径没问题但激活状态不生效，大概率是路由匹配逻辑没命中。

你可以尝试手动控制激活状态，用 v-model:active 来绑定当前激活的索引，并配合 watch 来监听路由变化，手动设置激活项。

代码改法如下：

<template>

  <van-tabbar v-model:active="activeTab">

    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>

    <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>

  </van-tabbar>

</template>



<script>

import { ref, watch } from 'vue';

import { useRoute } from 'vue-router';



export default {

  setup() {

    const route = useRoute();

    const activeTab = ref(0);



    const setActiveTab = () => {

      if (route.path === '/') {

        activeTab.value = 0;

      } else if (route.path === '/search') {

        activeTab.value = 1;

      }

    };



    watch(() => route.path, setActiveTab);

    setActiveTab(); // 初始化一次



    return { activeTab };

  }

};

</script>

这样手动控制激活状态可以绕过组件内部的路径匹配逻辑，确保图标状态正确显示。如果你 tabbar 项更多，可以用数组遍历匹配路径，这样写起来更通用。