Vue.js使菜单项激活

Vue.js make menu item active

本文关键字：激活 菜单项 js Vue      更新时间：2023-09-26

当有人访问页面时，我如何在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>

谢谢

您可以在v-link中切换active类

v-link="{path : 'your-link', activeClass: 'active', exact: true}"
相关文章：