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

Posted 2023-02-22

【中文标题】使用路由或查询更改 vuetify 选项卡

【英文标题】：Change vuetify tab with the route or query

【发布时间】：2019-07-31 04:01:09

【问题描述】：

我有这样的标签...

<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" 我至少可以通过查询来完成这项工作吗？看来我的代码是正确的，但我不明白为什么它不能工作

【参考方案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>

也许对你有帮助

【讨论】：

谢谢你。我从你那里学到了 getter 和 setter！但这就像我的应用程序一样。如果将console.log 添加到每个getter 和setter，然后将选项卡更改为（例如1），然后使用路由器推送导航，然后按浏览器上的后退按钮，调用getter，并返回1，然后（对于什么原因？） setter 被调用，tab 被设置为0。谁在给二传手打电话？？

setter 在activeTab 更改时调用。

实际上这可能与"1" 和1（字符串和整数）之间的差异有关。如果我们在分配之前检查这个应该会更好：return this.$route.query.tab*1 in getter 或 if (val*1 === this.activeTab*1) return in setter。

我用的是this.$router.replace，你也可以用this.$router.push。

非常感谢您的帮助。我最终更改了一堆组件文件，使它们看起来像这个答案 (***.com/a/54990915/3245272) 并且它起作用了。

【参考方案2】：

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

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