Vue.js machen Menüeintrag aktiv

Question

Wie kann ich einen Menüeintrag in Vue.js aktivieren, wenn jemand die Seite besucht? Ich kann kein gutes Beispiel im Internet finden?

<header> 
     <nav> 
     <ul class="navigation"> 
      <li class="navigation-item ritten" v-if="user.authenticated" v-link="{name: 'rides'}"> 
      <p>Ritten</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" v-link="{name: 'newRide'}"> 
      <p>Nieuwe rit</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" v-link="{name: 'locations'}"> 
      <p>Locaties</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" v-link="{name: 'newLocation'}"> 
      <p>Nieuwe locatie</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" v-link="{name: 'type'}"> 
      <p>Types</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" v-link="{name: 'users'}"> 
      <p>Gebruikers</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" v-link="{name: 'profile'}"> 
      <p>Profiel</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" v-link="{name: 'register'}"> 
      <p>Registreer</p> 
      </li> 

      <li class="navigation-item" v-if="user.authenticated" @click.prevent="logout"> 
      <p>Uitloggen</p> 
      </li> 
     </ul> 
     <nav> 
    </header> 

Dank

Answer 1

Sie können eine active Klasse in Ihrer v-link

v-link="{path : 'your-link', activeClass: 'active', exact: true}"