Vuetify(v1.0.18)：如何通过属性预选中指定v-tabs标签页？

嘿，我刚好对Vuetify 1.x版本的v-tabs组件比较熟悉，帮你搞定这个预选中标签的问题～

你之前尝试用id和value匹配的方式无效，是因为在Vuetify 1.0.x里，v-tabs的value属性并不是和v-tab的id绑定的，它的匹配逻辑有特定规则，下面给你几种靠谱的实现方式：

方法一：通过href值匹配（最推荐，适配服务端路由） #

因为你的标签页都是绑定了服务端路由的href，直接把v-tabs的value设置为对应标签的href字符串即可，这样还能和服务端路由保持同步：

<v-tabs value="/path2">
  <v-tab href="/path1">Tab 1</v-tab>
  <v-tab href="/path2">Tab 2</v-tab>
</v-tabs>

这种方式最稳妥，不管标签顺序怎么调整，只要href对应正确，就能精准激活目标标签。

方法二：通过索引值匹配 #

如果你的标签顺序固定不变，也可以用标签的索引值来设置value（第一个标签索引为0，第二个为1，以此类推）：

<v-tabs value="1">
  <v-tab href="/path1">Tab 1</v-tab>
  <v-tab href="/path2">Tab 2</v-tab>
</v-tabs>

不过这种方式的缺点是，如果后续调整了标签的顺序，激活逻辑就会出错，所以更推荐第一种方法。

方法三：给v-tab自定义value属性 #

你也可以给每个v-tab单独设置value属性，然后让v-tabs的value和这个自定义值匹配，这种方式适合不需要和路由强绑定的场景：

<v-tabs value="tab2">
  <v-tab value="tab1" href="/path1">Tab 1</v-tab>
  <v-tab value="tab2" href="/path2">Tab 2</v-tab>
</v-tabs>

补充说明 #

为什么你之前用id的方式不行？因为Vuetify 1.x的v-tabs组件并没有把v-tab的id作为value的匹配依据，它的优先级是：先匹配v-tab的href，再匹配v-tab的value属性，最后才会用索引值。所以之前的id设置完全不会被组件识别到哦～

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