Vuex: url 새 탭으로 열기

서비스 페이지를 만들 때 간혹 다른 url로 이동해야 하는 경우가 있다.

서비스 사이트 내의 url이라면 router를 사용하면 되지만, 아예 외부 사이트(예를 들면 github 등)로 이동하는 것이라면 새로운 탭을 열어주는 것이 서비스 이용 측면에서 좋다.

= 우리 사이트를 계속 열어둔 상태이기 때문에 서비스 이용자를 뺏기지 않는다.

(만약 하나의 탭에서 외부 사이트로 이동해버리면 우리 서비스를 다시 이용할지 불확실하기 때문이다)

 

 

따라서 a 태그를 사용하는 것이 아니라 다른 방법을 사용해야 하는데 매우 쉽다.

링크를 걸 태그에 onClick event를 걸어주고, 해당 태그를 클릭하면 openInNewTab 함수가 실행되도록 한다.

openInNewTab 함수에서는 전달받은 url을 가져와서 window.open을 하는데, 이때 '_blank'로 열어서 새로운 탭으로 열리게 한다.

focus를 주는 이유는 새로 열리는 탭이 맨 위로 오게 하기 위해서이다.

https://www.w3schools.com/jsref/met_win_open.asp

Window open() Method

 

예시는 아래와 같다.

<template>
    <div 
        @click="openInNewTab('https://github.com/jeong57')" 
    >GITHUB
    </div>
</template>


<script>
export default {
  ...
  methods: {
    openInNewTab(url) {
      const win = window.open(url, '_blank')
      win.focus();
    }
  },
}
</script>