<router-link> Evento Vue Router @click

Dec 06 2020

Tentei usar um evento de clique em um <router-link>. Funciona, mas está recarregando a página toda vez que o link é clicado. Eu gostaria de evitar, mas não consigo descobrir como.

Estou ciente de que <router-link>não aceita um simples evento @click. Eu vi em alguns fóruns que @ click.I native funcionaria, mas como sabemos, isso está obsoleto.

Então, eu gostaria de saber se existe alguma solução além de envolver o link do roteador em uma div e colocar o listener nessa div.

O motivo pelo qual desejo fazer isso é que desejo vincular uma classe dinamicamente quando o link for clicado. Eu criei um menu suspenso que é acionado ao clicar. Mas então, quando sigo um link dentro desse menu suspenso, o menu permanece aberto. Portanto, gostaria de ter um evento @click adicional para vincular dinamicamente uma classe (display: none) ao menu suspenso. O fato é que os itens dentro do menu suspenso são iterados, o que envia parâmetros para um Vuex Mutation e, portanto, não posso usar tags regulares e envolver os links do roteador com um span ou div também não está me dando o efeito desejado.

Obrigada !

Cumprimentos,

T.

Respostas

1 GurkanUgurlu Dec 06 2020 at 06:32

Se você entender sua pergunta, há uma propriedade "classe ativa" no roteador vue (link do roteador). Você pode definir suas classes dinamicamente com base em uma rota ativa.

Slaveworx Dec 09 2020 at 00:43

Consegui resolver o problema usando um divwrapper e alterando meu css (que estava impedindo o código de funcionar corretamente)

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