[vue.js] router-link :to 가 실행되는 조건 만들어주는 법

router-linke to로 된 nav 클릭 시,

회원정보가 있으면 router-link :to 로 목록을 보이게 하고싶고,

없으면 메인으로 돌아오게 하고싶다!!

 

즉, router-link to 클릭 시 메소드로 연결해주고 싶을 때 !

 

여러 방법을 써봤으나 안되다가 찾은 방법

 

아래와 같이 해주면 된다.

<router-link
  class="nav-link"
  :to="{ name: 'Main' }"
  :class="{ 'text-light': nightMode }"
  @click.native="checkUserAddr"
  >커뮤니티
 </router-link>

checkUserAddr(e) {
  if (!this.userInfo) {
    e.preventDefault();

    alert("로그인 후 이용가능합니다.");
    this.$router.push({ name: "Main" });
  }
}