라우터 이름을 통해 Vuetify 탭을 Vue-Router와 함께 사용하는 방법

라우터 이름을 통해 Vuetify 탭을 Vue-Router와 함께 사용하는 방법

이 문제에는 해결책의 좋은 예가 있다.하지만 이름을 통해 루트를 사용하려고 하면 작동이 안 돼.

난 그런걸 시도해봤어:

<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
  },
];

왜냐하면 :값은 객체가 될 수 없기 때문이다.

나는 놀이를 위해 일하는 Jsfiddle과 breaking 버전을 만든다.

P.S. 답에 댓글을 달 수 없어 새로운 질문을 만들었다.

업데이트: 임시 솔루션:

라우터의수동 해결 방법(예:

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

위의 해결책에는 한 가지 문제가 있다는 것을 알아차렸다.다음 코드는 루프:

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

각 라우터가 N-time(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>

...

지스피들

참조URL: https://stackoverflow.com/questions/55420892/how-to-use-vuetify-tabs-with-vue-router-via-router-name