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

Vue.js使菜单项有效

1 个答案: