我对vuetify tabs有问题。一切正常,但是当我向 v-tab 添加确切参数时,底栏动画停止工作。选项卡正确显示,但 v-tabs-slider-wrapper 位置未更新。
没有确切的参数是可以的。
如何修复此动画?
路由.js
{
path: "/course",
component: Course,
children: [
{
path: "",
component: CourseDetails,
name: "courseDetails"
},
{
path: "lessons",
component: CourseLessons,
name: "courseLessons"
},
{
path: "reviews",
component: CourseReviews,
name: "courseReviews"
},
]
},
课程.vue
<template>
<v-container fluid>
<v-row>
<v-col>
<v-tabs v-model="activeTab" grow>
<v-tab to="/course" exact>Details</v-tab>
<v-tab to="/course/lessons" exact>Lessons</v-tab>
<v-tab to="/course/reviews" exact>Reviews</v-tab>
</v-tabs>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<router-view></router-view>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "Course",
data: () => ({
activeTab: null
})
};
</script>