Home:ALL Converter>How to navigate to specific tab in Bootstrap-vue tabs in vue routes?

How to navigate to specific tab in Bootstrap-vue tabs in vue routes?

Ask Time:2018-08-30T14:19:30         Author:ace

Json Formatter

I am using Bootstrap-vue tabs. This is HTML for tabs:

<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>

Here is the route for cats:

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

In component code:

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

This will take to:

localhost:3000/animals/234909888#cats

But dogs tab is open (the first tab) instead of cats tab. Also refreshing browser will display blank page.

How to fix this issue?

Author:ace,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/52090371/how-to-navigate-to-specific-tab-in-bootstrap-vue-tabs-in-vue-routes
yy