在一开始没去看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的跳转~~~