bootstrap-vue tabs - open a tab content given an anchor in the url

b-tabs is supposed to be used for local (non-url) based content (the href prop on b-tab is deprecated)

You can, however, easily use b-nav and divs to generate URL navigation based tabs:

<div class="tabs">  <b-nav tabs>    <b-nav-item to="#" :active="$route.hash === '#' || $route.hash === ''">      One    </b-nav-item>    <b-nav-item to="#two" :active="$route.hash === '#two'">      Two    </b-nav-item>    <b-nav-item to="#three" :active="$route.hash === '#three'">      Three    </b-nav-item>  </b-nav>  <div class="tab-content">    <div :class="['tab-pane', { 'active': $route.hash === '#' || $route.hash === '' }]" class="p-2">      <p>Tab One (default) with no hash</p>    </div>    <div :class="['tab-pane', { 'active': $route.hash === '#two' }]" class="p-2">      <p>Tab One with hash #two</p>    </div>    <div :class="['tab-pane', { 'active': $route.hash === '#three' }]" class="p-2">      <p>Tab One with hash #three</p>    </div>  </div></div>

This assumes you are using Vue router.

For anyone looking to solve this problem here is my workaround:

<template>  <b-card no-body>    <b-tabs card :value="activeTabIndex" @input="changeRoute">      <b-tab title="A" no-body>        <p>Content A</p>      </b-tab>      <b-tab title="B" no-body>        <p>Content B</p>      </b-tab>      <b-tab title="C" no-body>        <p>Content C</p>      </b-tab>    </b-tabs>  </b-card></template><script>export default {  data: () => {    return {      tabsPathsDictionary: ['/[yourPathToTabs]/a', '/[yourPathToTabs]/b', '/[yourPathToTabs]/c']    }  },  computed: {    activeTabIndex () {      const route = this.$route.path.toLowerCase();      const index = this.tabsPathsDictionary.findIndex(element => element === route) || 0;       return index;    }  },  methods: {    changeRoute (value) {      this.$router.push(this.tabsPathsDictionary[value])    }  }}</script>

The usual active property on the default tab can not be used with this solution, as it will always redirect to that tab on reload. Of course the solution can be used with url params by using this.$route.params accordingly instead of this.$route.path (which would require some refactoring). The example assumes using Vue Router.