引导选项卡在 Vue 应用程序中不起作用

Question

我正在使用 vue、vue-router 和 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 })

完全没有工作标签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 }