title: How to navigate to specific tab in Bootstrap-vue tabs in vue routes?
body: <p>I am using <a href="https://bootstrap-vue.js.org/docs/components/tabs/" rel="noreferrer">Bootstrap-vue tabs</a>. This is HTML for tabs:</p>
  
  <pre><code>&lt;b-tabs&gt;
    &lt;b-tab title="Exotic Dogs" href="#dogs"&gt;
      &lt;br&gt;Dogs here
    &lt;/b-tab&gt;
    &lt;b-tab title="Exotic Cats"  href="#cats"&gt;
      &lt;br&gt;Cats here
    &lt;/b-tab&gt;
  
  &lt;/b-tabs&gt;
  </code></pre>
  
  <p>Here is the route for cats:</p>
  
  <pre><code>{
          path: '/animals/:id#cats',
          name: 'getCats',
          component: Animals // removed from HTML to simplify
      },
  </code></pre>
  
  <p>In component code:</p>
  
  <pre><code>this.$router.replace({ name: 'getCats', params: { id: this.$route.params.id }})
  </code></pre>
  
  <p>This will take to:</p>
  
  <p>localhost:3000/animals/234909888#cats</p>
  
  <p>But  dogs tab is open (the first tab) instead of cats tab. Also refreshing browser will display blank page. </p>
  
  <p>How to fix this issue?</p>