Bootstrap nav pills for VueJS vue-router

<router-link> by defult is rendered as an achor tag `<a>`.

Bootstap 4 nav-pills have a <a> tag with class nav-link. as below:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  </li>
</ul>

So just add that class to your <router-link>

<li class="nav-item">
  <router-link class="nav-link" active-class="active" to="/studentDashboard">Dashboard</router-link>
</li>

To add the active class to the nav-pill that represents the current active route add active-class prop on every `