<라우터 링크> Vue Router @click 이벤트

Question

에서 클릭 이벤트를 사용해 보았습니다 <router-link>. 작동하지만 링크를 클릭 할 때마다 페이지를 다시로드합니다. 나는 그것을 피하고 싶지만 방법을 알 수 없습니다.

나는 <router-link>간단한 @click 이벤트를 받아들이지 않는다는 것을 알고 있습니다. 일부 포럼에서 @ click.I native가 작동하는 것을 보았지만 우리가 알고 있듯이 더 이상 사용되지 않습니다.

따라서 라우터 링크를 div에 래핑하고 리스너를 해당 div에 배치하는 것 외에 다른 솔루션이 있는지 알고 싶습니다.

이 작업을 수행하려는 이유는 링크를 클릭 할 때 클래스를 동적으로 바인딩하고 싶기 때문입니다. onClick이 트리거되는 드롭 다운 메뉴를 만들었습니다. 하지만 드롭 다운 메뉴 안의 링크를 따라 가면 메뉴가 계속 열려 있습니다. 따라서 드롭 다운 메뉴에 클래스 (display : none)를 동적으로 바인딩하는 추가 @click 이벤트를 갖고 싶습니다. 문제는 Vuex Mutation에 매개 변수를 보내는 드롭 다운 내의 항목이 반복되므로 일반 태그를 사용할 수 없으며 라우터 링크를 span 또는 div로 래핑해도 원하는 효과를 얻지 못합니다.

감사합니다 !

문안 인사,

티.

Answer 1

질문을 이해한다면 vue-router (router-link)에 "active-class"속성이 있습니다. 활성 경로를 기반으로 클래스를 동적으로 설정할 수 있습니다.

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>