路由器中断广告选项卡

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指令并对v-model执行watched操作。当v-model发生变化时，我提取了值(数组的索引)，并使用它来获取成本中心id，然后使用router.push设置路由

在页面加载(挂载)中，我使用路由参数(成本中心id)来查找模型索引并设置activeTab v- cost_centre。

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>

​

我创建了上面的代码片段来使用for...in的index，因为它反映了选项卡的顺序，而不会弄乱项的I。

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