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

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

Bootstrap选项卡无法在Vue应用程序中运行

1 个答案: