Vue/vuetify, 라우터 링크를 탭에 추가하는 방법

Vue/vuetify, 라우터 링크를 탭에 추가하는 방법

vuetify 탭 컴포넌트를 단순히 네비게이션 컨트롤로 사용하여

 <v-tabs dark fixed icons centered>
    <v-tabs-bar class="cyan">
      <v-tabs-slider color="yellow"></v-tabs-slider>
      <v-tabs-item router :to="{name: 'election/admin', id: this.$route.params['id']}">
        Overview
      </v-tabs-item>
    </v-tabs-bar>

  </v-tabs>

하지만, 그것은 일하는 것을 따르지 않는 것 같다.는 는는 that i i i i i 。toin property in in in in in routerhref는?

15 2018/11/15 편집
새로운 예시가 추가되었습니다.codepen

<v-tabs v-model="activeTab">
  <v-tab v-for="tab in tabs" 
         :key="tab.name" 
         :to="{name: tab.name, params: id}"
  >
    {{tab.text}}
  </v-tab>
</v-tabs>

data: () => ({
  activeTab: "",
  tabs: [
    { name: "UserProfile", text: "Profile" }, 
    { name: "UserActivity", text: "Activity" },
    { name: "UserSettings", text: "Settings" },
  ],
}),

---

주의:
은 나이 든 에게 효과가 .vuetify전입니니다다
탭 는 " " "로 변경되었습니다.v1★★★★

<v-tabs>
    <v-tab>Tab 1</v-tab>
    <v-tab>Tab 2</v-tab>
    <v-tab-item>Tab 1 content</v-tab-item>
    <v-tab-item>Tab 2 content</v-tab-item>
</v-tabs>

되지만, '일단'에서는v-tab「」이의 요소v-tabs-item
★★<v-tab :to="{path:'/path/to/somewhere'}">

---

답변:

다음 중 하나를 사용합니다.

<v-tabs-item :to="{path:'/path/to/somewhere'}">

또는

<v-tabs-item :to="{name:'RouteName'}">

★★path »name

하시면 됩니다.name이름 있는 루트를 사용하는 경우

은 AFAIK를 통과할 수 .props를 named route 이름을 붙여야 합니다.

:to="{name: 'RouteName', params: {id: $route.params['id'] }}"

, 는 반드시 안쪽에 가 있습니다.params 표시

언급URL : https://stackoverflow.com/questions/46710477/vue-vuetify-how-to-add-router-link-to-tab