路由器中断了 vuetify 选项卡

Question

在添加路由之前，我有一些按预期工作的 vuetify 选项卡。 我希望在活动选项卡更改时更改路线。

当我将 :to 指令添加到 v-tab 时，路由正常工作（选项卡更改时路由更改）但选项卡项目不显示。显示 v-tab-item 的区域现在是空白的。

<v-tabs v-model='activeTab'>
  <v-tab
    v-for='cc in cost_centres'
    :key='cc.id'
    :to="{ name: 'Element', params: {id: cc.id}}"
    >
    {{ cc.name }}
  </v-tab>
  <v-tabs-items v-model='activeTab'>
    <v-tab-item 
      v-for='cc in cost_centres' 
      :key='cc.id'>
      <!-- Content -->
    </v-tab-item>
  </v-tabs-items>
</v-tabs>

vuetify 文档引用了 vue-router 文档，我认为我的接线正确，但我无法让它工作。 我错过了什么？

Answer 1

:to 将v-tab 的value 和v-tabs 的v-model 设置为路径 而不是id（或数组的索引） )。

所以我删除了:to 指令和watched v-model。 当 v-model 发生变化时，我提取了值（数组的索引）并使用它来获取成本中心 id，然后使用 router.push 设置路由

在页面加载（挂载）时，我使用路由参数（成本中心 ID）来查找 cost_centre 索引并设置 activeTab v-model。

Answer 2

您可以使用<router-view> 而不是<v-tabs-items>：

const Foo = {
  computed: {
    id() {
      return this.$route.params.id || ''
    }
  },
  template: '<v-card flat>foo {{ id }}</v-card>'
}
const Bar = {
  computed: {
    id() {
      return this.$route.params.id || ''
    }
  },
  template: '<v-card flat>bar {{ id }}</v-card>'
}

const routes = [{
    path: "/",
    redirect: {
      name: "foo"
    }
  },
  {
    path: "/foo",
    name: "foo",
    component: Foo
  },
  {
    path: "/bar",
    name: "bar",
    component: Bar
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  vuetify: new Vuetify(),
  data() {
    return {
      activeTab: "foo",
      cost_centres: [{
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "bar"
        },
      ]
    }
  },
  watch: {
    $route: function(val) {
      console.log(val)
    }
  },
  mounted() {
    console.log(this.$route)
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-tabs v-model="activeTab">
            <v-tab v-for="cc in cost_centres" :key="cc.id" :to="{ name: cc.name, params: { id: cc.id }}">
              {{ cc.name }}
            </v-tab>
          </v-tabs>
          <router-view></router-view>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

这样内容同步的不是v-model，而是:to&routes。

---

编辑：新解决方案

如果你只是使用路由的查询部分，那么你可以控制标签：

const routes = [{
    path: "/",
    redirect: {
      path: "/0"
    }
  },
  {
    path: "/:idx",
    name: "foo"
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  vuetify: new Vuetify(),
  data() {
    return {
      activeTabRoute: 0,
      activeTab: 0,
      cost_centres: [{
          id: 0,
          name: "foo"
        },
        {
          id: 1,
          name: "bar"
        },
      ]
    }
  },
  watch: {
    $route: function(val) {
      this.activeTab = val.params.idx
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-tabs v-model="activeTabRoute">
            <v-tab v-for="(cc, i) in cost_centres" :key="cc.id" :to="{ name: 'foo', params: { idx: i } }">
              {{ cc.name }} {{ cc.id }} {{ activeTab }}
            </v-tab>
          </v-tabs>
          <v-tabs-items v-model="activeTab">
            <v-tab-item v-for="cc in cost_centres" :key="cc.id">
              <v-card flat>
                Name: {{ cc.name }}<br /> ID: {{ cc.id }}<br /> IDx: {{ $route.params.idx }}
              </v-card>
            </v-tab-item>
          </v-tabs-items>
        </v-col>
      </v-row>
      <v-row>
        <v-col>$route: {{ $route }}</v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

我创建上面的sn-p来使用for...in的index，因为它反映了选项卡的顺序，并且不会弄乱项目的ID。

这样您就可以将此组件与vue-router 一起使用。