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

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

작성

수정됨

안녕하세요.

이 강의 수강 후 프로젝트를 하나 진행하고 있습니다.

다름이 아니라 제목처럼 router-link 클릭시에 이벤트를 추가하고 싶습니다.

구체적인 상황은 GNB가 펼쳐진 상태에서 메뉴 클릭해서 라우터 이동하면 펼쳐졌던 메뉴가 닫혀야 하는데 라우터 이동만 하고 메뉴가 그대로 열려있는 상화입니다.

기존의 Vue2 에서는 @click.native="함수실행" 이런 식으로 라우터 이동전에 실행할 이벤트를 추가할 수 있었는데요...

Vue3 에서는 .native 가 deprecated 되서 사용이 불가하네요.

내비게이션 가드에서 처리해도 될 것 같기는 한데 뭔가 제대로된 해결책이 아닌것 같아서요.

이런 경우가 아니더라도 다른 필요한 상황이 더 있을 수 있을것 같아서 알아둬야 할것 같은데...

혹시 router-link 태그에 이벤트를 추가할 수 있는 다른 방법이 있을까요?

공식문서를 읽어봐도 이해가 안되서 여기에 질문드립니다.

답변 1

지식공유자

안녕하세요 :)

router-link 에 이벤트를 바인딩 하기 위해서는 <router-link @click="핸들러" />를 사용할 수 있습니다.

Vue2에서 .native를 이용하여 자식 컴포넌트의 루트 요소에 이벤트를 추가할 수 있었습니다.
Vue3에서는 .native가 deprecated 되었습니다.

대신 Vue3에서는 새롭게 등장한 emits 옵션을 활용하여 자식 루트 요소의 바인딩 여부를 결정할 수 있습니다.

만약 emits 옵션에 지정할 경우 > 자식 루트 요소의 바인딩에 제외가 되며
만약 emits 옵션에 지정하지 않은 경우 > 자식 루트요소에 바인딩이 됩니다.
(기존 .native 대체, 이러한 속성은 Non-Prop 또는 fallthrough 속성 이라고 함)

추가적으로

이러한 내용은 Fallthrough 속성, inheritAttrs, $attrs에 관한 지식을 숙지하시면 이해하시는데 도움이 되실거에요.

그리고 이러한 내용은 기본편[컴포넌트 기초 & 심화 > Non-Prop 속성]에서 자세히 다루고 있습니다.

감사합니다.

질문자

감사합니다. 해당 내용 다시 보겠습니다!

인프런 커뮤니티 질문&답변