<router-link> Événement Vue Router @click

Question

J'ai essayé d'utiliser un événement de clic sur un fichier <router-link>. Cela fonctionne, mais il recharge la page à chaque fois que vous cliquez sur le lien. J'aimerais l'éviter mais je ne sais pas comment.

Je suis conscient que <router-link>cela n'accepte pas un simple événement @click. J'ai vu sur certains forums que @ click.I native fonctionnerait, mais comme nous le savons, c'est obsolète.

Je voudrais donc savoir s'il existe une solution autre que d'envelopper le lien du routeur dans un div et de placer l'auditeur sur ce div.

La raison pour laquelle je veux faire cela est que je veux lier une classe dinamicaly lorsque le lien est cliqué. J'ai créé un menu déroulant qui se déclenche onClick. Mais ensuite, lorsque je suis un lien dans ce menu déroulant, le menu reste ouvert. Par conséquent, je voudrais avoir un événement @click supplémentaire pour lier de manière dynamique une classe (display: none) au menu déroulant. Le fait est que les éléments à l'intérieur de la liste déroulante sont itérés qui envoient des paramètres à une mutation Vuex et que je ne peux donc pas utiliser de balises régulières et que le fait d'emballer les liens de routeur avec un span ou un div ne me donne pas non plus l'effet souhaité.

Merci !

Salutations,

T.

Answer 1

Si vous comprenez votre question, il existe une propriété "active-class" sur vue-router (router-link). Vous pouvez définir vos classes de manière dynamique en fonction d'un itinéraire actif.

Answer 2

J'ai réussi à résoudre le problème en utilisant un divwrapper et en changeant mon css (cela empêchait le code de fonctionner correctement)

 <div class="dropdown">
        <a class="dropbtn" @click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
        <div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
          <div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" @click="dropClick">
            <router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
            </router-link>
          </div>
        </div>
      </div>