<router-link> Vue Router @click-Ereignis

Dec 06 2020

Ich habe versucht, ein Klickereignis auf einem zu verwenden <router-link>. Es funktioniert, aber es lädt die Seite jedes Mal neu, wenn auf den Link geklickt wird. Ich würde es gerne vermeiden, aber ich kann nicht herausfinden, wie.

Mir ist bekannt, dass <router-link>ein einfaches @ click-Ereignis nicht akzeptiert wird. Ich habe in einigen Foren gesehen, dass @ click.I native funktionieren würde, aber wie wir wissen, ist das veraltet.

Ich würde gerne wissen, ob es eine andere Lösung gibt, als die Router-Verbindung in ein Div zu verpacken und den Listener auf dieses Div zu setzen.

Der Grund, warum ich dies tun möchte, ist, dass ich eine Klasse dinamicaly binden möchte, wenn auf den Link geklickt wird. Ich habe ein Dropdown-Menü erstellt, das bei Klick ausgelöst wird. Wenn ich dann einem Link in diesem Dropdown-Menü folge, bleibt das Menü geöffnet. Daher hätte ich gerne ein zusätzliches @ click-Ereignis, um eine Klasse (Anzeige: keine) dynamisch an das Dropdown-Menü zu binden. Die Sache ist, dass die Elemente in der Dropdown-Liste iteriert werden, die Parameter an eine Vuex-Mutation senden, und daher kann ich keine regulären Tags verwenden, und das Umschließen der Router-Links mit einem Span oder Div bringt mir auch nicht den gewünschten Effekt.

Vielen Dank !

Grüße,

T.

Antworten

1 GurkanUgurlu Dec 06 2020 at 06:32

Wenn Sie Ihre Frage verstehen, gibt es eine "Active-Class" -Eigenschaft auf dem Vue-Router (Router-Link). Sie können Ihre Klassen dynamisch festlegen, indem Sie eine aktive Route verwenden.

Slaveworx Dec 09 2020 at 00:43

Ich habe es geschafft, das Problem mit einem divWrapper zu lösen und mein CSS zu ändern (das verhinderte, dass der Code richtig funktionierte).

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