CODEWITHSUNDEEP
javascriptvue.js
Jamie
Jamie

Reputation: 10886

Vue.js make menu item active

How could I make a menu item active in Vue.js when someone visits the page? I can't find any great example on the web?

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

Thanks

Upvotes: 2

Views: 3164

Answers (1)

highFlyingSmurfs
highFlyingSmurfs

Reputation: 3039

You can toggle an active class in your v-link

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

Upvotes: 4

Related Questions