Как перейти к определенной вкладке во вкладках Bootstrap-vue в маршрутах vue?

Question

Я использую Вкладки Bootstrap-vue . Это 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 / животные / 234909888 # кошки

Но вкладка собак открыта (первая вкладка) вместо вкладки кошек. Также при обновлении браузера отобразится пустая страница.

Как решить эту проблему?

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)
  }
  ...
}