Javascript bootstrap vue tabs—打开url中给定锚定的选项卡内容

我正在为SPA使用

bootstrap vue

，我正在制作一个页面，需要在

b-tabs

中嵌套一些内容

通过给定一个带有锚的url（例如：

www.mydomain.com/page123#tab-3

），我想显示

选项卡3

下的内容

问题：如何在bootstrap vue中实现这一点？ 是否有一个本机函数可以用于此？ 参考：（我在文档中找不到：）

---

以下是我的代码：

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

表1内容
表2内容
表3内容

这是呈现的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>

表1内容
表2内容
表3内容

b-tabs

应该用于基于本地（非url）的内容（b-tab上的

href

道具不推荐使用）

但是，您可以轻松使用

b-nav

和

div

s生成基于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>

一个
两个
三
选项卡1（默认值），不带哈希

带散列的表1#2

带散列的表1#3

---

这假设您使用的是Vue路由器。

我能想到的最简单的解决方案是使用类似

www.mydomain.com/page123#？3

的路由查询，然后您只需检查挂载的查询并将带有该编号的选项卡设置为活动。这是一种有趣的方法，我在互联网上找到的最常见的解决方案是编写一些自定义函数。我想知道

boootstrap

，或

bootstrap vue

，或

vue

本身是否有内置功能。很好！成功了。我将尝试创建一个返回类

活动的函数，这样它就可以在每个选项卡中重用，而不是硬编码。但非常感谢：）