时间戳

首页 > 解决方案 > 使用路由或查询更改 vuetify 选项卡

javascript - 使用路由或查询更改 vuetify 选项卡

问题描述

我有这样的标签...

<v-tabs v-model="tab" v-on:change="tabbed()" fixed-tabs>
  <v-tab ripple>Tab A</v-tab>
  <v-tab ripple>Tab B</v-tab>
  <v-tab ripple>Tab C</v-tab>
  
  // tab items, etc

我想要 URL 路径来确定选项卡，并且我想要一个选项卡更改来更改路径。我无法用路径做到这一点（因为我是新手），但我想我可以用查询来近似我想要的，比如/mypath?tab=2

  data: () => ({
    tab: null
  }),
  methods: {
    tabbed () {
      console.log(`we tabbed, now tab is ${this.tab} and route is ${JSON.stringify(this.$route.path)}`)
      this.$router.replace({ path: this.$route.path, query: { tab: this.tab } })
    }
  },
  created () {
    console.log(`tab is ${this.$route.query.tab}`)
    this.tab = this.$route.query.tab
  }

我认为这可以解决问题：在创建时，从查询中获取选项卡并设置选项卡模型。在选项卡更改时，从选项卡模型中获取选项卡并设置查询。但是，当我导航到/mypath?tab=2或任何选项卡时，我最终会进入第 0 个选项卡并获得如下控制台输出：

选项卡是 2

我们加了标签，现在标签是 0 并且路由是“/mypath”

关于安装的东西将标签变回零？

我可以使用路线进行这项工作吗，所以我可以转到"/mypath/tab-a" 我至少可以使用查询进行这项工作吗？看来我的代码是正确的，但我不明白为什么它无法工作

标签： javascriptvue.jsvuetify.js

解决方案

好的，我通过这个解决了同样的问题：

<template>
    <el-tabs v-model="activeTab">
        <el-tab-pane label="tab A" name="tabA"></el-tab-pane>
        <el-tab-pane label="tab B" name="tabB"></el-tab-pane>
        <el-tab-pane label="tab C" name="tabC"></el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        data() {
            return {}
        },
        computed: {
            activeTab: {
                set(val) {
                    let query = {...this.$route.query};
                    query.tab = val;
                    this.$router.replace({query: query});
                },
                get() {
                    return (this.$route.query.tab || 'tabA');
                }
            }
        }
    }
</script>

也许对你有帮助

推荐阅读