我有这样的选项卡...
我希望URL路径能够决定标签,同时标签的更改也能够改变路径。由于我刚开始学习,所以无法使用路径来实现这一点,但我认为可以通过查询来近似实现,比如像这样:
我认为下面的方式可以解决问题:在创建时,从查询中获取标签并设置标签模型。在标签更改时,从标签模型获取标签并设置查询。但是,当我导航到
<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”
? 我至少可以通过查询使其工作吗?看起来我的代码是正确的,但我不理解它为什么不能正常工作。
1
,然后(出于什么原因?)调用setter并将选项卡设置为0
。是谁在调用setter? - goodsonactiveTab
改变时,会调用setter
。 - talkhabi"1"
和1
(字符串和整数)之间的差异有关。在getter中,我们最好在分配之前检查它:return this.$route.query.tab*1
或在setter中使用if (val*1 === this.activeTab*1) return
。 - talkhabithis.$router.replace
,你也可以使用this.$router.push
。 - talkhabi