Как добавить вкладку Vuetify с отдельным файлом router.js? - PullRequest
Новая
       14

Как добавить вкладку Vuetify с отдельным файлом router.js?

0 голосов
/ 04 апреля 2019

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

Я пробовал код, содержащий пример, но он не увенчался успехом.

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

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

1 Ответ

1 голос
/ 04 апреля 2019

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

...