Bootstrap選項卡無法在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路由器不匹配的路徑/所以從來服務選項卡：

Fiddle Demo

如果問題來作爲jQuery是推散URI，那麼你將很可能需要一個通配符添加到您的路線path來匹配這個新的URI，即

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

route：

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