How add active class in vuejs with router-link?

Question

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)?

Boussadjra Brahim · Accepted Answer · 2021-11-20 14:42:49Z

1

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

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

answered Nov 20, 2021 at 14:42

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How add active class in vuejs with router-link?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related