How to apply styles to an active router-link in Vuejs

Question

I have a side bar containing multiple sidebar items like this

<side-bar>
    <template slot="links">

        <sidebar-item  :link="{name: 'Home', icon: 'ni ni-shop text-primary', path: '/dashboard'}" />
        <sidebar-item  :link="{name: 'Videos', icon: 'ni ni-tv-2 text-primary', path: '/videos'}"/>
        <sidebar-item  :link="{name: 'Category', icon: 'ni ni-single-copy-04 text-primary', path: '/category'}"/>
        <sidebar-item  :link="{name: 'Comments', icon: 'ni ni-ambulance text-primary', path: '/comments'}"/>
        <sidebar-item  :link="{name: 'Artist', icon: 'ni ni-palette text-primary', path: '/artists'}"/>
        <sidebar-item  :link="{name: 'Users', icon: 'ni ni-circle-08 text-primary', path: '/users'}"/>
        <sidebar-item  :link="{name: 'Transactions', icon: 'ni ni-credit-card text-primary', path: '/transactions'}"/>

    </template>
</side-bar>

Side bar items have router links like this

<li class="nav-item bg-white">
<router-link
  :to="link.path"
  @click.native="linkClick"
  class="nav-link"
  :target="link.target"
  :href="link.path"
>
  <template>
      <i :class="link.icon"></i>
      <span class="nav-link-text">{{ link.name }}</span>
  </template>
</router-link>

router config has linkExactActiveClass: 'active',

What should i do to style the active sidebar item here

Where is `link.target` coming from? You don't pass it – Ke Vin Jul 24 '21 at 10:30 — Ke Vin, Jul 24 '21 at 10:30

score 0 · Answer 1 · answered Jul 24 '21 at 11:07

The router-link has an attribute active-class which allows you to create a class on that element when it is active for example:

<router-link
        active-class="nav__active"
        to="/something"
        class="header__nav"
      > Something
</router-link>

In your styles:

.header__nav{
    ....
}
.nav__active{
    /* your styles for the active link */
}

let me know if this is what you are looking for

How to apply styles to an active router-link in Vuejs

1 Answers1