[Vuejs]-VueJS adding active class to a sidebar link

by

0👍

You need to define router-active-link class to style active link element. You can either define it to your global css or under your style tag inside of your component. For example:


.router-link-active {

  background-color: #000;
  padding: 2rem;

}

0👍

Style

.activeClass {
      /* background-color: var(--v-primary-base) !important; */
      background: linear-gradient(98deg,#000000,var(--v-primary-base) 94%);
      color: var(--v-primary-lighten1) !important;
    }

Your router link

    <router-link tag="li" to="/forwarding" active-class="activeClass" exact class="nav-item has-treeview">
     <a class="nav-link" id="forwarding_tab">
       <i class="sidebar-icons">settings_ethernet</i>
       <p class="sidebar-links">Forwarding</p>
     </a>
   </router-link>

Leave a comment