Как использовать вкладки Vuetify с vue-router через имя маршрутизатора - PullRequest
Новая
       12

Как использовать вкладки Vuetify с vue-router через имя маршрутизатора

2 голосов
/ 29 марта 2019

В этом вопросе есть отличный пример решения .Но это не работает, когда я пытаюсь использовать маршрут по имени.

Я пробовал что-то вроде этого: 

<v-tabs v-model="active">
    <v-tab v-for="tab of tabs" :key="tab.id" :to="{ name: tab.route_name }">
        {{ tab.name }}
    </v-tab>

    <v-tab-item v-for="tab of tabs" :key="tab.id" :value="{ name: tab.route_name }">
        <router-view></router-view>
    </v-tab-item>
</v-tabs>

data() {
    return {
      active: '',
      tabs: [
        { id: 1, name: "Task", route_name: 'task' },
        { id: 2, name: "Project", route_name: 'project' }
      ]
    };
  }

const routes = [
  {
    path: '/task',
    name: 'task',
    component: Task
  },
  {
    path: '/project',
    name: 'project',
    component: Project
  },
];

Это просто ломается, потому что: значение может 't be Object.

Я создаю рабочую jsfiddle и версию для игры.

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

Обновление: временное решение:

Я использую разрешение маршрутизатора вручную, например: 

<v-tabs v-model="active">
    <v-tab v-for="tab of tabs" :key="tab.id" :to="tab.route">
        {{ tab.name }}
    </v-tab>

    <v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route">
        <router-view></router-view>
    </v-tab-item>
</v-tabs>

  data: {
    active: '',
  },
  computed: {
    tabs() {
      return [{
          id: 1,
          name: "Task",
          route: this.routeResolve('task')
        },
        {
          id: 2,
          name: "Project",
          route: this.routeResolve('project')
        }
      ]
    }
  },
  methods: {
    routeResolve(name) {
      return this.$router.resolve({
        name: name,
      }).location.path
    },
  },

jsfiddle пример

1 Ответ

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

Я заметил, что у вышеуказанных решений есть одна проблема.Следующий код представляет собой цикл: 

<v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.route">
    <router-view></router-view>
</v-tab-item>

Это означает, что каждый маршрутизатор будет продублирован N раз (где N - количество вкладок).Когда я попытался исправить это, я обнаружил, что мы можем просто использовать следующий код в качестве решения: 

<v-tabs v-model="active">
    <v-tab v-for="tab of tabs" :key="tab.id" :to="{ name: tab.route_name }">
        {{ tab.name }}
    </v-tab>
</v-tabs>

<router-view></router-view>

...

jsfiddle

...