Vuetify中v-tab添加exact参数后底部滑块动画失效如何解决

问题原因 #

这个问题是Vuetify的v-tabs组件内部激活匹配逻辑和v-tab的exact属性不联动导致的：v-tabs默认通过路由包含匹配判断哪个标签激活，不会读取v-tab上的exact属性调整匹配规则，给所有v-tab都加exact后内部匹配逻辑失效，无法同步更新绑定的activeTab值，底部滑块自然不会跟随切换动画。

解决方案 #

方案1：手动同步路由和激活标签（推荐，适配所有场景） #

给每个v-tab添加value属性对应路由路径，同时监听路由变化手动更新activeTab的值即可，修改后的Course.vue代码如下：

<template>
  <v-container fluid>
    <v-row>
      <v-col>
        <v-tabs v-model="activeTab" grow>
          <v-tab to="/course" exact value="/course">Details</v-tab>
          <v-tab to="/course/lessons" exact value="/course/lessons">Lessons</v-tab>
          <v-tab to="/course/reviews" exact value="/course/reviews">Reviews</v-tab>
        </v-tabs>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <router-view></router-view>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "Course",
  data: () => ({
    activeTab: null
  }),
  watch: {
    $route: {
      immediate: true,
      handler(newRoute) {
        // 直接把当前完整路由路径赋值给activeTab，和v-tab的value对应
        this.activeTab = newRoute.fullPath
      }
    }
  }
};
</script>

方案2：仅给根路径标签加exact #

你的场景里只有第一个/course路径标签需要加exact避免子路由下被误激活，剩下两个子路由标签本身不会和其他路径重复，不需要加exact，移除后两个标签的exact参数即可恢复滑块动画，代码如下：

<v-tabs v-model="activeTab" grow>
  <!-- 仅根路径标签加exact -->
  <v-tab to="/course" exact>Details</v-tab>
  <!-- 子路由标签无需加exact -->
  <v-tab to="/course/lessons">Lessons</v-tab>
  <v-tab to="/course/reviews">Reviews</v-tab>
</v-tabs>

内容的提问来源于stack exchange，提问作者Lidia K.