vue3 새창으로 링크 걸기

vue3 <script setup> 코드로 새창으로 링크 거는 예시이다. a 태그에서 바로 쓸수도 있지만 버튼에서 링크가 걸려야 하는 경우 예시도 같이 메모해 본다. 

 

sns 로그인 같은 버튼을 연동할때 유용하게 쓸수 있는거 같다. 

<template>
  <div>
    <a :href="link" target="_blank" rel="noopener noreferrer">새 창으로 열기 (링크)</a>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const link = ref('https://www.example.com');
</script>

 

버튼 예시

<template>
  <div>
    <button @click="openLink">새 창으로 열기 (버튼)</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const link = ref('https://www.example.com');

const openLink = () => {
  window.open(link.value, '_blank', 'noopener,noreferrer');
};
</script>