Question

我在使用vue路由器制作vuetify标签时遇到麻烦，这是我的codepen，我错过了一些如此明显的东西吗？

目的

将指定路径的组件呈现为选项卡内容本身的一部分。在这种情况下，希望 Page 1 t0出现在tab1下， Page 2 出现在tab2下。 点击标签不应该将我重定向到该路线，而是在每个标签下显示该路线的内容

包

 "dependencies": {
  "vue": "^2.5.2",
  "vue-router": "^3.0.1",
  "vuetify": "^1.0.0",
  },

VUE的标记

 <div id="app">
 <v-tabs left color='grey lighten-4'>
   <v-tab>Page 1</v-tab>
   <v-tab-item :to="{path:'/page1'}">
   </v-tab-item>
   <v-tab>Page 2</v-tab>
   <v-tab-item :to="{path:'/page1'}">
   </v-tab-item>
</v-tabs>
<router-view />
</div>

JS

Vue.use(VueRouter)
 let component1 = {
  template:`<div class="title">Page 1</div>`
 }
 let component2 = {
  template:`<div class="title">Page 2</div>`
 }
let router = new VueRouter({
 routes: [
  {
    path: '/page1',
    name: 'Page 1',
    component: component1,
  },
  {
   path: '/page2',
   name: 'Page 2',
   component: component2,
  }
  ]
})

new Vue({
 el: '#app',
 router
})

Answer 1

我也有这个问题。这个设置对我有用。

<v-tabs fixed-tabs>
    <v-tab :to="{path:'/page1'}">Page 1</v-tab>
    <v-tab :to="{path:'/page2'}">Page 2</v-tab>
</v-tabs>

所以基本上不要使用v-tab-item，而是将:to放在标签上。

Answer 2

这应该有效 - 至少对于最新版本的Vue和Vue-Router。

<div id="app">
  <v-app>
    <v-tabs left color='grey lighten-4'>
      <v-tab to="/page1">Page 1</v-tab>
      <v-tab to="/page2">Page 2</v-tab>
    </v-tabs>
    <router-view></router-view>
  </v-app>
</div>

带VueRouter的Vuetify 1.0.0选项卡无法按预期工作

2 个答案: