CODEWITHSUNDEEP
htmlcssvue.js
arash daneshgar
arash daneshgar

Reputation: 83

Active class for "li" in Sidebar Vuejs

I am using this Sidebar in my Vuejs project:

<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
  <!-- Add icons to the links using the .nav-icon class
      with font-awesome or any other icon font library -->
  <li class="nav-item has-treeview menu-open" style="direction:rtl;text-align:right">
    <a to="#" class="nav-link active">
      <i class="nav-icon fas fa-tachometer-alt ml-2"></i>
      <p>
        لینک ها
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <router-link to="/" class="nav-link active">
          <i class="far fa-circle nav-icon"></i>
          <p>صفحه اصلی</p>
        </router-link>
      </li>
      <li class="nav-item">
        <router-link to="/profile" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>پروفایل</p>
        </router-link>
      </li>
      <li class="nav-item">
        <router-link to="/about" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>صفحه تستی</p>
        </router-link>
      </li>
    </ul>
  </li>
</ul>

by default, only one "li" has an "active" class... But I need to active the current "route" that we are using. How should I do it?

Upvotes: 0

Views: 902

Answers (1)

Omid Nikrah
Omid Nikrah

Reputation: 2482

As I see in the Vue Router documentation, router-link will automatically add an active class to your link when its target route is matched and you can easily set your custom class for it. So, you don't need to handle it manually.

https://router.vuejs.org/api/#active-class

Upvotes: 2

Related Questions