How add active class in vuejs with router-link?-CodePudding

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

CodePudding user response：

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

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