[vue.js] Event (기초)

e.preventDefault(); <a>태그 링크 막기

링크 클릭시 "진짜 이 페이지에서 나가시겠습니까?" 라는 문구를 본적 있을 것이다. 대부분 'yes'를 누르겠지만, Vue에서 <a>태크 사용시 진짜 링크로 이동할껀지 아닌지 comfirm을 받은 후 이동할지 안할지 결정하는 방법에 대해 알아보자!

<template>
  <div>
    <button v-on:click="movePage" herf="http://google.com">구글로 이동</button>
  </div>
</template>

<script>
  export default {
	name: "preventDefault",
	data() {
      methods: {
        movePage(e) {
          const check = confirm("구글로 이동시겠습니까?");
          if (check) {
            console.log("페이지 이동");
          } else {
            e.preventDefault();
            console.log("페이지 이동 중지");
          }
        }
      }
    }
  }
</script>