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

Posted 2023-02-23

【中文标题】使用路由器 Vuetify 选项卡 - tab.isActive 始终为 false

【英文标题】：Vuetify tabs with router - tab.isActive is always false

【发布时间】：2021-07-01 05:55:19

【问题描述】：

我正在尝试使用router 实现Vuetify v-tabs，因此每个选项卡都位于不同的网址上。 问题是没有表被激活。一切似乎都正常，但我没有看到任何内容，我注意到没有标签有 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'),
            ,
        ]
    
    ...

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

【参考方案1】：

我认为 v-tabs 的想法是将其用作选项卡而不是导航，但尝试将“to”属性放在“router-link”而不是“v-tab”中，如下所示：

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