Vue3 에서 router-link 에 이벤트 추가 방법

Question

안녕하세요. 이 강의 수강 후 프로젝트를 하나 진행하고 있습니다. 다름이 아니라 제목처럼 router-link 클릭시에 이벤트를 추가하고 싶습니다. 구체적인 상황은 GNB가 펼쳐진 상태에서 메뉴 클릭해서 라우터 이동하면 펼쳐졌던 메뉴가 닫혀야 하는데 라우터 이동만 하고 메뉴가 그대로 열려있는 상화입니다. 기존의 Vue2 에서는 @click.native="함수실행" 이런 식으로 라우터 이동전에 실행할 이벤트를 추가할 수 있었는데요... Vue3 에서는 .native 가 deprecated 되서 사용이 불가하네요. 내비게이션 가드에서 처리해도 될 것 같기는 한데 뭔가 제대로된 해결책이 아닌것 같아서요. 이런 경우가 아니더라도 다른 필요한 상황이 더 있을 수 있을것 같아서 알아둬야 할것 같은데... 혹시 router-link 태그에 이벤트를 추가할 수 있는 다른 방법이 있을까요? 공식문서를 읽어봐도 이해가 안되서 여기에 질문드립니다.

gymcoding · Answer

안녕하세요 :) router-link 에 이벤트를 바인딩 하기 위해서는 <router-link @click="핸들러" /> 를 사용할 수 있습니다. Vue2에서 .native 를 이용하여 자식 컴포넌트의 루트 요소에 이벤트를 추가할 수 있었습니다. Vue3에서는 .native 가 deprecated 되었습니다. 대신 Vue3에서는 새롭게 등장한 emits 옵션을 활용하여 자식 루트 요소의 바인딩 여부를 결정할 수 있습니다. 만약 emits 옵션에 지정할 경우 > 자식 루트 요소의 바인딩에 제외가 되며 만약 emits 옵션에 지정하지 않은 경우 > 자식 루트요소에 바인딩이 됩니다. (기존 .native 대체, 이러한 속성은 Non-Prop 또는 fallthrough 속성 이라고 함) 추가적으로 Non-Props 속성의 루트 요소의 바인딩을 막으려면 inheritAttrs 옵션 을 사용할 수 있습니다. 루트 요소 말고 다른 요소나 컴포넌트에 바인딩을 하려면 $attrs 속성을 사용할 수 있습니다. 이러한 내용은 Fallthrough 속성, inheritAttrs, $attrs에 관한 지식을 숙지하시면 이해하시는데 도움이 되실거에요. 그리고 이러한 내용은 기본편[컴포넌트 기초 & 심화 > Non-Prop 속성] 에서 자세히 다루고 있습니다. 감사합니다.