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

可以触发一个active类的v-link

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