Vue.jsメニュー項目を有効にする

Question

誰かがこのページにアクセスしたときにVue.jsでメニュー項目をアクティブにするにはどうすればよいですか？私はウェブ上の素晴らしい例を見つけることができませんか？

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

おかげ

Answer 1

あなたはありがとうは素晴らしい作品あなたのv-link

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