javascript - Bootstrap 选项卡在 Vue 应用程序中不起作用

Question

我正在使用 vue、vue-router 和 bootstrap 创建一个应用程序。我正在尝试在 Bootstrap 中实现标签，如下所示:

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
  <div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>

此代码在没有 Vuejs 的情况下可以正常工作:fiddle

但是当我在 Vue 和 Vue 路由器上使用相同的代码时，它停止工作，我也没有收到任何错误。

const router = new VueRouter({
    mode: 'history',
    routes: [
    { name: 'Tabs', path: '/', component: Tabs }
  ]
})
new Vue({ el: '#app', store, router })

用不工作的标签完成 fiddle here .

我的想法是，如果我从路由器中删除 mode history 它会开始工作，但我做不到。

mode: 'history',

为什么会发生这种情况以及如何解决。

Answer 1

对于您的示例，这是由于 vue-router 与路径 / 不匹配，因此永远不会提供选项卡:

Fiddle Demo

如果问题是在 jQuery 推送哈希 URI 时出现的，那么您可能需要在路由 path 中添加通配符以匹配这个新的 URI，即

http://example.com/tabs-path#3

路线:

{ name: 'Tabs', path: '/tabs-path*', component: Tabs }