bootstrap-vue 选项卡 - 在 url 中给定锚点打开选项卡内容

Posted 2023-02-16

【中文标题】bootstrap-vue 选项卡 - 在 url 中给定锚点打开选项卡内容

【英文标题】：bootstrap-vue tabs - open a tab content given an anchor in the url

【发布时间】：2019-04-05 05:49:19

【问题描述】：

我正在将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>

【问题讨论】：

我能想到的最简单的解决方案是使用像www.mydomain.com/page123#?3 这样的路由查询，然后您只需检查已安装的查询并将带有该编号的选项卡设置为活动状态。

这是一种有趣的方法，我能在互联网上找到的最常见的解决方案是编写一些自定义函数。我想知道boootstrap、bootstrap-vue 或vue 本身是否有内置功能。

【参考方案1】：

b-tabs 应该用于基于本地（非 URL）的内容（b-tab 上的 href 属性已弃用）

但是，您可以轻松地使用 b-nav 和 divs 生成基于 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 路由器。

【讨论】：

不错！那行得通。我将尝试创建一个返回类active 的函数，因此它可以在每个选项卡中重复使用，而不是对其进行硬编码。但是非常感谢:)

【参考方案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 属性不能用于此解决方案，因为它总是会在重新加载时重定向到该选项卡。当然，该解决方案可以与 url 参数一起使用，相应地使用 this.$route.params 而不是 this.$route.path （这需要一些重构）。该示例假设使用 Vue Router。