Is it possible to add .active to a marker using router-link?

Question

Vue.js

.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

Answer 1

data: () => ({
  links: [ 'tasks', 'kanban', 'activity', 'calendar', 'files' ],
}),

ul
  li(v-for="n in links")
    router-link(:to="{ name: n }") {{ n }}
.marker
  div(v-for="n in links" :class="[ `select${n}`, $route.name === n ? 'active' : '' ]")
    span

It is not clear why it is needed - they would remove these "markers", and stylize the links themselves, there is no need to add any classes manually, everything is already there .

Answer 2

Maybe you should read the documentation, which even has just such an example ?