Vuetify：预选活动选项卡的完整指南

Vuetify 中预先选择活动选项卡的指南

问题

使用 Vuetify 呈现静态导航时，需要通过属性预先选择活动选项卡，而无需客户端路由。

解决方案

要预先选择活动选项卡，请遵循以下步骤：

1. 使用 v-model 绑定选项卡数组：

<v-tabs v-model="activeTab">

2. 设置 activeTab 数据：

data() {
  return {
    activeTab: 'tab2', // 预先选择第二个选项卡
  }
}

3. 确保选项卡具有唯一的 ID：

<v-tab id="tab1" href="/path1">选项卡 1</v-tab>
<v-tab id="tab2" href="/path2">选项卡 2</v-tab>

4. 使用 v-if 动态显示内容：

<div v-if="activeTab === 'tab1'">选项卡 1 内容</div>
<div v-if="activeTab === 'tab2'">选项卡 2 内容</div>

完整示例

<v-tabs v-model="activeTab">
  <v-tab id="tab1" href="/path1">选项卡 1</v-tab>
  <v-tab id="tab2" href="/path2">选项卡 2</v-tab>
</v-tabs>

<div v-if="activeTab === 'tab1'">选项卡 1 内容</div>
<div v-if="activeTab === 'tab2'">选项卡 2 内容</div>

常见问题解答

1. 如何在代码中动态设置 activeTab？

this.activeTab = 'tab3' // 将 `activeTab` 设置为 'tab3'

2. 是否可以在服务器端预渲染时设置 activeTab？

是，通过在 vue-meta 中设置 metaInfo.title，可以在服务器端预渲染时设置 activeTab。

3. 如何在外部 JavaScript 模块中访问 activeTab？

可以使用 Vue.prototype.$root 访问 activeTab：

Vue.prototype.$root.activeTab // 获取 `activeTab` 的值

4. 如何禁用某些选项卡？

<v-tab :disabled="true" href="/path1">选项卡 1</v-tab>

5. 如何使选项卡链接指向不同的页面？

<v-tab href="https://google.com" target="_blank">外部链接</v-tab>

结论

通过遵循上述步骤，你可以轻松预先选择 Vuetify 中的活动选项卡，并根据需要动态显示内容。