<router-link> событие @click Vue Router

Question

Я пробовал использовать событие щелчка на <router-link>. Он работает, но перезагружает страницу каждый раз, когда щелкают по ссылке. Я бы хотел этого избежать, но не могу понять, как это сделать.

Я знаю, что <router-link>не принимает простое событие @click. Я видел на некоторых форумах, что @ click.I native будет работать, но, как мы знаем, это устарело.

Поэтому я хотел бы знать, есть ли какое-либо решение, кроме как обернуть ссылку маршрутизатора в div и поместить слушателя в этот div.

Причина, по которой я хочу это сделать, заключается в том, что я хочу динамически привязать класс при нажатии ссылки. Я создал раскрывающееся меню, которое запускается при нажатии. Но затем, когда я перехожу по ссылке в этом раскрывающемся меню, меню остается открытым. Поэтому я хотел бы иметь дополнительное событие @click для динамической привязки класса (display: none) к раскрывающемуся меню. Дело в том, что элементы внутри раскрывающегося списка повторяются, которые отправляют параметры в Vuex Mutation, и поэтому я не могу использовать обычные теги, а упаковка ссылок маршрутизатора с помощью диапазона или div также не дает мне желаемого эффекта.

Спасибо !

С уважением,

Т.

Answer 1

Если вы понимаете ваш вопрос, на vue-router (router-link) есть свойство «активный класс». Вы можете динамически устанавливать классы на основе активного маршрута.

Answer 2

Мне удалось решить проблему, используя divоболочку и изменив свой css (это мешало правильной работе кода)

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