Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below:
<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>
The provided code functions perfectly fine without Vuejs, as demonstrated in this fiddle.
However, upon attempting to utilize the same code with Vue and Vue Router, I encounter a situation where it ceases to function without any apparent error messages.
const router = new VueRouter({
mode: 'history',
routes: [
{ name: 'Tabs', path: '/', component: Tabs }
]
})
new Vue({ el: '#app', store, router })
You can view a complete fiddle showcasing the malfunctioning tabs here.
Upon analysis, I have noticed that by removing mode history from the router configuration, the tabs resume their intended functionality. Unfortunately, removing this is not a viable solution for me.
mode: 'history',
I am curious as to why this issue is occurring and seeking guidance on how to rectify it.