Question

我正在将bootstrap-vue用于SPA，并且我正在一个页面上需要在b-tabs中嵌套一些内容。

通过给定带有锚点的网址（例如：www.mydomain.com/page123#tab-3），我想在Tab 3下显示内容。

问题：如何在bootstrap-vue中进行操作？我可以使用本机功能吗？ 参考：（我在文档https://bootstrap-vue.js.org/docs/components/tabs/中找不到）

这是我的代码：

<b-tabs>


  <b-tab title="Tab 1" active>
    Tab 1 content
  </b-tab>

  <b-tab title="Tab 2">
    Tab 2 content
  </b-tab>

  <b-tab title="Tab 3">
    Tab 3 content
  </b-tab>


</b-tabs>

这是渲染的 html代码：

<div class="tabs">
  <div class="">
    <ul role="tablist" tabindex="0" class="nav nav-tabs">
      <li class="nav-item">
        <a role="tab" tabindex="-1" href="#" class="nav-link active">Tab 1</a>
      </li>
      <li class="nav-item">
        <a role="tab" tabindex="-1" href="#" class="nav-link">Tab 2</a>
      </li>
      <li class="nav-item">
        <a role="tab" tabindex="-1" href="#" class="nav-link">Tab 3</a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane show fade active">
      Tab 1 content
    </div>
    <div class="tab-pane fade" style="display: none;">
      Tab 2 content
    </div>
    <div class="tab-pane fade" style="display: none;">
      Tab 3 content
    </div>
  </div>
</div>

Answer 1

b-tabs应该用于基于本地（非URL）的内容（不推荐使用href上的b-tab属性）

但是，您可以轻松地使用b-nav和div来生成基于URL导航的标签：

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

这假定您正在使用Vue路由器。

Answer 2

对于希望解决此问题的任何人，这是我的解决方法：

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

默认选项卡上通常的 active 属性不能与此解决方案一起使用，因为它总是会在重新加载时重定向到该选项卡。当然，该解决方案可以通过相应地使用 this.$route.params 而不是 this.$route.path （这需要一些重构）与 url 参数一起使用。该示例假设使用 Vue Router。

bootstrap-vue选项卡-在URL中给定锚的情况下打开选项卡内容

2 个答案: