CODEWITHSUNDEEP
vue.jsvue-router
Victor Zhvanetskiy
Victor Zhvanetskiy

Reputation: 55

How add active class in vuejs with router-link?

I have

.navigation
ul
  li
    router-link(:to="{ name: 'tasks'}") Tasks
  li
    router-link(:to="{ name: 'kanban'}") Kanban
  li
    router-link(:to="{ name: 'activity'}") Activity
  li
    router-link(:to="{ name: 'calendar'}") Calendar
  li
    router-link(:to="{ name: 'files'}") Files
  .marker
  .selecttasks
    span
  .selectkanban
    span
  .selectactivity
    span.third-marker( )
  .selectcalendar
    span.fourth-marker( )
  .selectfiles
    span

How with click on router-link add active class to markers(for example to .selecttasks)?

Upvotes: 2

Views: 445

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

For each router link component add the prop active-class like :

 router-link(:to="{ name: 'tasks'}" active-class="selecttasks") Tasks

Upvotes: 1

Related Questions