javascript - 如何添加带有独立 router.js 文件的 Vuetify 选项卡？

Question

我想将选项卡路由到我已分配的某个组件，但它不成功，因为当我单击选项卡时，该组件不会保留选项卡 View 并直接查看另一个页面。

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

这里是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>

这里是 router.js 文件:

import Bill from './views/myccom/bill.vue'
Vue.use(Router)
 routes: [
    {
      path: '/bill',
      name: 'Bill',
      component: Bill
    },
  ],

如何使选项卡固定在顶部并且内容移动而不隐藏选项卡？

Answer 1

不要使用v-tab-item，只使用router-view。

示例:

<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>

https://codepen.io/lc-brito/pen/GLoERR