通过路由或查询更改Vuetify选项卡

Question

我有这样的选项卡...

<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号选项卡，并且会得到类似以下内容的控制台输出：

tab是2

我们切换了选项卡，现在选项卡是0，路由是“/mypath”

某些关于挂载的内容会将选项卡更改回零吗？ 我能否通过路由使其工作，以便我可以转到“/mypath/tab-a”？ 我至少可以通过查询使其工作吗？看起来我的代码是正确的，但我不理解它为什么不能正常工作。

- goodson

Answer 1

好的，我通过以下方式解决了同样的问题：

<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>

也许对你有所帮助。

- talkhabi

---

谢谢你的帮助。我从你那里学到了关于getter和setter的知识！但是这个行为就像我的应用程序一样。如果你在每个getter和setter中添加console.log，然后将选项卡更改为（例如1），然后使用路由器推送导航，然后在浏览器上按返回按钮，则会调用getter并返回1，然后（出于什么原因？）调用setter并将选项卡设置为0。是谁在调用setter？ - goodson

当activeTab改变时，会调用setter。 - talkhabi

实际上，这可能与"1"和1（字符串和整数）之间的差异有关。在getter中，我们最好在分配之前检查它：return this.$route.query.tab*1或在setter中使用if (val*1 === this.activeTab*1) return。 - talkhabi

我使用了 this.$router.replace，你也可以使用 this.$router.push。 - talkhabi

我非常感谢你的帮助。最终，我改变了一堆组件文件，使它们看起来像这个答案（https://dev59.com/mVUL5IYBdhLWcg3w1rBK#54990915），然后它就起作用了。 - goodson

Answer 2

我也遇到了这个问题，通过在处理路由时使用parseInt来解决它：

this.tab = parseInt(this.$route.query.tab)

- Alex Nordstrom