Vuetify工具栏项始终激活问题：返回首页时取消v-tabs激活状态

这个问题其实是因为你的v-tabs绑定的v-model值没有在回到首页时主动重置，导致它还保留着之前选中的tab索引，所以哪怕路由切回了首页，对应的tab依然显示激活状态。咱一步步来解决：

第一步：初始化v-model变量 #

首先在组件的data里添加tab变量，初始值设为null（首页状态下我们希望没有任何tab被激活）：

data() {
  return {
    appTitle: "ShowCase",
    drawer: false,
    tab: null // 新增：初始无选中tab
  };
}

第二步：监听路由变化，重置tab状态 #

我们需要监听路由的切换，当路由回到首页（路径为/）时，把tab重置为null；同时，当路由切换到对应的tab页面时，也自动设置对应的tab值（这样刷新页面时tab也能正确激活）。

在组件里添加watch监听$route，再加上mounted钩子处理页面初始化的情况：

watch: {
  $route(to) {
    // 跳转到首页时，重置tab为null
    if (to.path === '/') {
      this.tab = null;
    } else {
      // 根据当前路由设置对应的tab值
      const routeTabMap = {
        '/Tuttiigiochi': 0,
        '/Sceltidallaredazione': 1,
        '/Aboutus': 2
      };
      this.tab = routeTabMap[to.path] || null;
    }
  }
},
mounted() {
  // 页面初始化时检查路由，确保状态正确
  if (this.$route.path === '/') {
    this.tab = null;
  } else {
    const routeTabMap = {
      '/Tuttiigiochi': 0,
      '/Sceltidallaredazione': 1,
      '/Aboutus': 2
    };
    this.tab = routeTabMap[this.$route.path] || null;
  }
}

（可选）用自定义值代替索引，提升可读性 #

如果你觉得用索引不够直观，可以给每个v-tab设置value属性，绑定自定义字符串：

<v-tabs optional v-model="tab" fixed-tabs height="70" color="#252525" hover>
  <v-tab value="all-games" @click="$router.push('/Tuttiigiochi')"> All Games </v-tab>
  <v-tab value="retro-gaming" @click="$router.push('/Sceltidallaredazione')"> RetroGaming </v-tab>
  <v-tab value="about-us" @click="$router.push('/Aboutus')"> About us</v-tab>
</v-tabs>

对应的watch和mounted里的映射关系也要改成对应的字符串：

watch: {
  $route(to) {
    if (to.path === '/') {
      this.tab = null;
    } else {
      const routeTabMap = {
        '/Tuttiigiochi': 'all-games',
        '/Sceltidallaredazione': 'retro-gaming',
        '/Aboutus': 'about-us'
      };
      this.tab = routeTabMap[to.path] || null;
    }
  }
},
mounted() {
  if (this.$route.path === '/') {
    this.tab = null;
  } else {
    const routeTabMap = {
      '/Tuttiigiochi': 'all-games',
      '/Sceltidallaredazione': 'retro-gaming',
      '/Aboutus': 'about-us'
    };
    this.tab = routeTabMap[this.$route.path] || null;
  }
}

为什么之前的optional没用？ #

optional属性只是允许v-tabs处于“无选中”状态，但它不会自动在路由切换时重置v-model的值——你必须主动把tab设为null，才能触发这个无选中的状态。

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