浏览器上的后退按钮没有转到vue中的右侧选项卡

Question

我在应用程序中使用v-tab。我在这里面临的问题是，在"用户"选项卡上，我有一些链接，可以将我进一步带到另一个页面。但是，当我点击浏览器上的后退按钮返回到上一个页面，即用户选项卡页面时，它会转到官员选项卡，而不是用户选项卡。请帮助我解决这个问题。

<v-tabs v-model="tabsOption"
centered
color="black"
slider-color="red">
<v-tab  href="#officers">Officers</v-tab>
<v-tab  href="#users">Users</v-tab>
</v-tabs>
<script>
export default {
data: function() {
return {
tabsOption: 'officers'
}
},
created: function() {
this.tabsOption = window.location.hash.slice(1) || 'officers' || 'users';
},
}
</script>

Answer 1

如果使用v-tab-item，则可以使用哈希链接将v-tab中的:to属性与v-tab-item中的value属性组合起来，如下所示：

<v-tabs>
<v-tab :to="'#alpha'">Tab A</v-tab>
<v-tab :to="'#bravo'">Tab B</v-tab>
<v-tab-item value="alpha">Tab A content</v-tab-item>
<v-tab-item value="bravo">Tab B content</v-tab-item>
</v-tabs>

如果单击"；选项卡B"；然后点击某个链接，将您带到一个新页面，然后通过浏览器返回按钮或history.back((返回；选项卡B"；将是活动的并且其内容"是"；选项卡B内容"；将是可见的