bootstrap vue-tabs-打开一个在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应该用于基于本地(非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路由器。