如何手动更新Vuetify Tab滑块？菜单点击时滑块不切换

点击Menu中的路由选项时，v-tabs的选中滑块不会自动切换到Menu按钮下方，本质是v-tabs的active状态仅响应自身v-tab的点击，不会监听外部路由变化。

修复代码（修改src/App.vue） #

<template>
  <v-app>
    <v-tabs v-model="activeTab">
      <v-tab to="/1">Tab 1</v-tab>
      <v-tab to="/2">Tab 2</v-tab>
      <!-- 将菜单按钮转为v-tab兼容元素，确保滑块可定位 -->
      <v-btn 
        v-tab 
        role="tab"
        :class="{ 'v-tab--active': activeTab === 2 }"
        v-bind="menuActivatorProps"
      >
        Tab 3
      </v-btn>
      <v-menu>
        <template v-slot:activator="{ props }">
          <span v-bind="props" ref="menuActivator"></span>
        </template>
        <v-list>
          <v-list-item to="/3?item=1" @click="activeTab = 2">Item 1</v-list-item>
          <v-list-item to="/3?item=2" @click="activeTab = 2">Item 2</v-list-item>
        </v-list>
      </v-menu>
    </v-tabs>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeTab = ref(0)
const menuActivatorProps = ref({})
const menuActivator = ref(null)

// 监听路由变化，同步激活的tab状态
watch(route, (newRoute) => {
  switch (newRoute.path) {
    case '/1':
      activeTab.value = 0
      break
    case '/2':
      activeTab.value = 1
      break
    case '/3':
      activeTab.value = 2
      break
  }
}, { immediate: true })
</script>

关键逻辑说明 #

• 主动控制tab激活状态：通过v-model="activeTab"绑定v-tabs的选中索引，替代默认的自动绑定逻辑
• 路由与tab状态同步：用watch监听路由变化，根据当前路径更新activeTab，确保滑块跟随路由切换
• 菜单按钮适配：给菜单按钮添加v-tab指令和激活样式，让v-tabs将其识别为有效tab项，滑块才能定位到该位置
• 菜单点击同步：点击菜单选项时直接设置activeTab为菜单对应的索引，确保滑块立即切换

内容的提问来源于stack exchange，提问作者TripleCamera