nuxt-link Boolean값에 따라서 조건부 처리하는 방법

nuxt-link에는 event props가 존재하는데 이 값을 활용해서 조건부로 경로이동을 시킬지 말지에 대해 처리할 수 있습니다.

아래는 event props를 활용한 예시입니다.

 

유저가 로그인하지 않았다면 라우팅 처리를 막을 수 있습니다.

<nuxt-link
  :to="item.url"
  :event="isAuthorization ? 'click' : ''"
>

 

click.native를 활용하면 조금 더 다양한 처리를 할 수 있습니다.

아래 예시는 인증된 유저라면 라우트 처리를 하고, 아니라면 native 클릭 이벤트를 사용하게 해주는 예시입니다

<nuxt-link
  :to="item.url"
  :event="isAuthorization ? 'click' : ''"
  @click.native="viewLoginPopup"
>