bootstrap-vue 标签 - 在 url 中给定锚点打开标签内容

Question

我正在使用 bootstrap-vue 作为 SPA，我正在处理一个页面，我们需要在 b-tabs 中嵌套一些内容。

通过给定一个 url 和一个锚点（例如：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 应该用于基于本地 (non-url) 的内容（不推荐使用 b-tab 上的 href 道具）

但是，您可以轻松地使用 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 中给定锚点打开标签内容

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

javascript

vue.js

bootstrap-4

bootstrap-vue