Vue.js make menu item active

Question

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

highFlyingSmurfs · Accepted Answer · 2016-09-26 07:50:01Z

4

You can toggle an active class in your v-link

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

answered Sep 26, 2016 at 7:50

highFlyingSmurfs

3,0492 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js make menu item active

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related