如何结合vue-router使用Vuetify tabs？

嘿，我懂你为啥头疼——Vuetify官方文档确实没给出Tabs结合vue-router的直接示例，不过你找到的代码思路是对的，我把它补全成完整可运行的方案，帮你快速实现标签页和路由联动的功能：

核心实现思路 #

给v-tabs-item添加router属性，并通过href绑定对应路由的path，就能让标签页点击时自动触发路由跳转，再配合<router-view>渲染对应路由的组件即可完成联动。

完整可运行代码 #

模板部分 #

<div id="app">
  <v-app>
    <v-tabs grow light>
      <v-tabs-bar>
        <!-- 首页路由标签 -->
        <v-tabs-item href="/" router>
          <v-icon>motorcycle</v-icon>
          <span>首页</span>
        </v-tabs-item>
        <!-- 狗狗页面路由标签 -->
        <v-tabs-item href="/dog" router>
          <v-icon>pets</v-icon>
          <span>狗狗专区</span>
        </v-tabs-item>
      </v-tabs-bar>
    </v-tabs>

    <!-- 路由视图容器：渲染当前路由对应的组件 -->
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</div>

脚本部分 #

// 定义两个路由组件
const Home = { template: '<v-card><v-card-text>这是首页内容，欢迎光临！</v-card-text></v-card>' }
const Dog = { template: '<v-card><v-card-text>这里是狗狗专区，汪~🐶</v-card-text></v-card>' }

// 配置路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/dog', component: Dog }
]

// 创建路由实例
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

// 初始化Vue应用并挂载
const app = Vue.createApp({})
app.use(router) // 注册vue-router插件
app.use(Vuetify.createVuetify()) // 注册Vuetify插件
app.mount('#app')

关键注意点 #

• 必须给v-tabs-item加上router属性，否则它只会当成普通链接跳转
• href的值要和路由配置里的path完全匹配，路由才能正确触发
• 页面中一定要有<router-view>组件，否则路由对应的内容没地方渲染
• 记得同时注册vue-router和Vuetify两个插件，缺一不可

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