<router-link> Zdarzenie Vue Router @click

Question

Próbowałem użyć zdarzenia kliknięcia na <router-link>. Działa, ale po każdym kliknięciu łącza ponownie ładuje stronę. Chciałbym tego uniknąć, ale nie wiem, jak to zrobić.

Zdaję sobie sprawę, że <router-link>nie akceptuje prostego zdarzenia @click. Widziałem na niektórych forach, że @ click.I native będzie działać, ale jak wiemy, jest to przestarzałe.

Chciałbym więc wiedzieć, czy istnieje jakieś rozwiązanie inne niż zawinięcie łącza routera w element div i umieszczenie słuchacza w tym elemencie div.

Powodem, dla którego chcę to zrobić, jest to, że chcę powiązać klasę automatycznie po kliknięciu łącza. Utworzyłem menu rozwijane, które jest uruchamiane po kliknięciu. Ale kiedy podążam za linkiem w tym menu rozwijanym, menu pozostaje otwarte. Dlatego chciałbym mieć dodatkowe zdarzenie @click, aby dynamicznie powiązać klasę (display: none) z menu rozwijanym. Chodzi o to, że elementy w rozwijanym menu są iterowane, co powoduje wysyłanie parametrów do mutacji Vuex i dlatego nie mogę używać zwykłych tagów, a zawijanie łączy routera za pomocą span lub div również nie daje mi pożądanego efektu.

Dziękuję Ci !

Pozdrowienia,

T.

Answer 1

Jeśli rozumiesz twoje pytanie, istnieje właściwość „active-class” na routerze vue (router-link). Możesz ustawić swoje klasy dynamicznie na podstawie aktywnej trasy.

Answer 2

Udało mi się rozwiązać problem za pomocą divwrappera i zmiany mojego css (co uniemożliwiało poprawne działanie kodu)

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