Javascript 如何使用单独的router.js文件添加Vuetify选项卡？

我想将选项卡路由到分配给我的某个组件，但没有成功，因为当我单击该选项卡时，该组件不会保留选项卡视图并直接查看其他页面

我一直在尝试提供一些示例的代码，但没有成功

这里是myaccount.vue

<template>
  <div>
    <v-toolbar color="deep-purple darken-4" dark tabs>
      <h3>My Account</h3>
<v-spacer></v-spacer>
     <v-btn small color="error">PAYMENT RM 1120.00</v-btn>
      <template v-slot:extension>
        <v-tabs color="deep-purple darken-4" align-with-title>
          <v-tabs-slider color="white"></v-tabs-slider>
              <v-tab to="/foo">Profile</v-tab>
              <v-tab to="/bill">Bill</v-tab>

        </v-tabs>
      </template>
    </v-toolbar>
    <v-tabs-items>
      <v-tab-item>
     <router-view></router-view>
      </v-tab-item>
    </v-tabs-items>
  </div>
</template>

---

如何使选项卡粘在顶部，内容移动而不隐藏选项卡？

不要使用

v-tab-item

，只使用

路由器视图

例如：

<template>
  <v-container>

    <v-tabs
      v-model="activeTab"
      slider-color="yellow">
      <v-tab to="{ name: 'profile' }">
        Profile
      </v-tab>

      <v-tab to="{ name: 'bill' }">
        Bill
      </v-tab>
    </v-tabs>

    <router-view/>
  </v-container>
</template>

<script>
export default {
  name: 'MyComponentName',

  data: () => ({
    activeTab: '0'
  })
}
</script>

轮廓
比尔
导出默认值{
名称：“MyComponentName”，
数据：（）=>({
activeTab:“0”
})
}

我遵循代码：然后，当我单击Bill时，它会移动到已决定的页面，但选项卡没有粘住。

<template>
  <v-container>

    <v-tabs
      v-model="activeTab"
      slider-color="yellow">
      <v-tab to="{ name: 'profile' }">
        Profile
      </v-tab>

      <v-tab to="{ name: 'bill' }">
        Bill
      </v-tab>
    </v-tabs>

    <router-view/>
  </v-container>
</template>

<script>
export default {
  name: 'MyComponentName',

  data: () => ({
    activeTab: '0'
  })
}
</script>