Vuetify选项卡与路由器-tab.isActive始终为false

Question

我正在尝试用router实现Vuetify v-tabs，这样每个选项卡都在不同的url上。问题是没有表被激活。一切似乎都在工作，但我没有看到任何内容，我注意到没有一个选项卡有isActive===true

这是一个包装组件：

<template>
<v-tabs
v-model="tab"
background-color="transparent"
color="basil"
grow
exact
>
<v-tab
key="products-update"
:to="{name:'products-update'}"
>
Update
</v-tab>
<v-tab
key="products-gallery"
:to="{name:'products-gallery'}"
>
Gallery
</v-tab>
<v-tab
key="products-preview"
:to="{name:'products-preview'}"
>
Preview
</v-tab>
<v-tab-item key="products-update" value="products-update">
UPDATE
<router-view></router-view>
</v-tab-item>
<v-tab-item key="products-gallery" value="products-gallery">
GALLERY
<router-view></router-view>
</v-tab-item>
<v-tab-item key="products-preview" value="products-preview">
PREVIEW
<router-view></router-view>
</v-tab-item>
</v-tabs>
</template>
<script>
import productForm from "@/components/dashboard/product/productForm";
import productGalleryForm from "@/components/dashboard/product/productGalleryForm"
import productPreview from "@/components/dashboard/product/productPreview";
import router from '@/router/index'
export default {
name: "DashboardProductLife",
components: {
productForm,
productGalleryForm,
productPreview,
},
computed: {
},
data(){
return {
tab:null,
}
}
}
</script>
<style scoped>
</style>

这是路线：

...
{
path: '/products/detail',
name: 'products-detail',
component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/DashboardProductLife'),
children: [
{
path: '/products/detail/create',
name: 'products-create',
component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/DashboardProductForm.vue'),
}, {
path: '/products/detail/update/:id',
name: 'products-update',
component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productForm'),
}, {
path: '/products/detail/gallery/:id',
name: 'products-gallery',
component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productGalleryForm'),
}, {
path: '/products/detail/preview/:id',
name: 'products-preview',
component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productPreview'),
},
]
}
...

你知道为什么它不起作用吗？我也很欣赏一个更好的解决方案。

Answer 1

我认为v-tab的想法是将其用作选项卡而不是导航；至"；属性在"；路由器链路"；而不是在"；v形接头"；如下所示：

<v-tab
key="products-update"
>
<router-link to='/products-update'>Update</router-link>
</v-tab>