javascript - 浏览器上的后退按钮未进入 vue 中的右侧选项卡

Question

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

<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 中的 属性，使用散列链接，如下所示:

<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 内容”将可见