Vuetify3：Vuetify3 + Nuxt3时 tabs 跳转页面

最新推荐文章于 2024-07-15 14:09:46 发布

dingcho

最新推荐文章于 2024-07-15 14:09:46 发布

阅读量168

点赞数 2

分类专栏：前端文章标签：前端 javascript 开发语言 nuxt3路由 vuetify3tabs跳转

本文链接：https://blog.csdn.net/yao_guai/article/details/140163641

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

在一开始没去看vuetify3的文档直接使用了nuxt3跳转方式

<template>
  <v-tabs>
    <NuxtLink :to="`/yourRouter`">
        <v-tab to="/tab1">Tab 1</v-tab>
    </NuxtLink>
    <v-tab to="/tab2">
        <NuxtLink :to="`/yourRouter`">
            Tab 2
        </NuxtLink>
    </v-tab>
  </v-tabs>
</template>

两种方式都实现了跳转，但是第一种改变了tabs的样式，使得页面不统一，第二种点击面只限制在了文字上面，如果你们的页面对样式要求不严格的话，可以采用上述方法，如果比较严格我们就考虑其它方式，通过Vuetify 3，直接通过to属性来指定路由链接。这里是一个简单的例子：

<template>
  <v-tabs>
    <v-tab to="/tab1">Tab 1</v-tab>
    <v-tab to="/tab2">Tab 2</v-tab>
    <v-tab to="/tab3">Tab 3</v-tab>
  </v-tabs>
</template>

这样就不会影响样式的前提，也实现了nuxt3的跳转~~~