Question

我有这样的标签...

for (b = 0; b < ch - 1; b++) {
    for (c = 0; c < ch - b - 1; c++) {
        if (array[c] > array[c + 1]) {
            sort = array[c];
            array[c] = array[c + 1];
            array[c + 1] = sort;
            //sorting the guessing result in ascending order
        }
    }
}
//printing to a file
printf("Sorted list in ascending order:\n");

for (b = 0; b < ch; b++)
    printf("%d\n", array[b]);

fprintf(file, "Sorting: %s %d\n", user_name, ch);
fclose(file);

我希望使用URL路径来确定选项卡，并且我希望通过更改选项卡来更改路径。我无法使用path进行此操作（因为我是新手），但是我认为我可以通过查询来近似想要的内容，例如<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

/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 }或任何选项卡时，我最终到达第0个选项卡，并获得如下所示的控制台输出：

标签为2

我们已制表，现在制表符为0，路由为“ / mypath”

有关挂载的操作会将选项卡恢复为零？

我可以使用路线吗，所以我可以去/mypath?tab=2 我至少可以通过查询使它起作用吗？看来我的代码是正确的，但我不明白为什么它无法正常工作

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>

也许对您有帮助

Answer 2

我也遇到了这个问题，并在处理路由时使用 parseInt 修复了它：

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

使用路线或查询更改vuetify标签

2 个答案: