javascript - 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 中切换一个 active 类

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