vue 경로의 Bootstrap-vue 탭에서 특정 탭으로 이동하는 방법은 무엇입니까?

vue 경로의 Bootstrap-vue 탭에서 특정 탭으로 이동하는 방법은 무엇입니까?

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/cats/234909888#cats

그러나 고양이 탭 대신 개 탭(첫 번째 탭)이 열려 있습니다.또한 브라우저를 새로 고치면 공백 페이지가 표시됩니다.

이 문제를 해결하려면 어떻게 해야 합니까?

추가해 볼 수 있습니다.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)
  }
  ...
}

언급URL : https://stackoverflow.com/questions/52090371/how-to-navigate-to-specific-tab-in-bootstrap-vue-tabs-in-vue-routes