Question

我正在使用Bootrap-vue tabs。这是标签的HTML：

<b-tabs>
  <b-tab title="Exotic Dogs" href="#dogs">
    <br>Dogs here
  </b-tab>
  <b-tab title="Exotic Cats"  href="#cats">
    <br>Cats here
  </b-tab>

</b-tabs>

这是猫的路线：

{
        path: '/animals/:id#cats',
        name: 'getCats',
        component: Animals // removed from HTML to simplify
    },

在组件代码中：

this.$router.replace({ name: 'getCats', params: { id: this.$route.params.id }})

这将导致：

localhost：3000 / animals / 234909888＃cats

但是，“狗”选项卡已打开（第一个选项卡），而不是“猫”选项卡。同样刷新的浏览器将显示空白页。

如何解决此问题？

Answer 1

您可以尝试将v-model="tabIndex"添加到<b-tabs>标记中，并使用$route.hash在mounted()中进行设置。

<b-tabs v-model="tabIndex">
  <b-tab title="Exotic Dogs" href="#dogs">
    <br>Dogs here
  </b-tab>
  <b-tab title="Exotic Cats"  href="#cats">
    <br>Cats here
  </b-tab>

</b-tabs>

export default {
  ...
  data() {
    return {
      tabIndex: 0,
      tabs: ['#dogs', '#cats']
    }
  },
  mounted() {
    this.tabIndex = this.tabs.findIndex(tab => tab === this.$route.hash)
  }
  ...
}

如何在vue路由中导航到Bootstap-vue选项卡中的特定选项卡？

1 个答案: