Блог

Я хочу перенаправить вкладку на какой-либо компонент, который я назначил, но это не удается, потому что, когда я нажимаю на вкладку, компонент не сохраняет вид вкладки и напрямую просматривает другую страницу.

Я пробовал код, который предоставляет некоторый пример, но это не увенчалось успехом.

Здесь 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
    },
  ],
  

Как мне сделать так, чтобы вкладка оставалась вверху, а содержимое перемещалось, не скрывая вкладку?

Не используйте 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