Vue - 두번 클릭해야 화면 이동 할 경우(a태그)

a태그 href에 '#'을 사용할 때 발생하는 이슈와 해결 방법

 

- 웹 개발 중에 종종 <a> 태그의 href 속성에 #을 사용하는 경우가 있습니다.

이는 주로 JavaScript 이벤트와 연결하여 동적으로 내용을 변경하거나 화면을 스크롤하는 등의 동작을 수행하기 위해 사용됩니다. 그러나 Vue.js와 같은 프런트엔드 프레임워크를 사용할 때, 이러한 방식으로 링크를 처리할 때 문제가 발생할 수 있습니다. 퍼블리싱받은 파일에 다음과 같이 <a> 태그가 포함되어 있다고 가정해 봅시다.

<a href="#">약관 동의</a>

일반적으로 이 링크를 클릭할 때 Vue.js의 router.push()를 사용하여 화면을 이동하고자 할 때, 다음과 같이 코드를 작성할 수 있습니다.

<a href="#" @click="pageMove('/move')">약관 동의</a>

//pageMove에는 다음과 같이 router를 사용한다고 할경우
function pageMove(path){
	router.push(path)
}

그러나 이런 경우, 버튼을 두 번 클릭해야 화면이 이동하게 됩니다. 이는 a태그와 Vue Router의 화면 이동이 충돌하여 발생하는 문제입니다.

 

해결 방법

- 이 문제를 해결하기 위해 다음과 같은 방법을 사용할 수 있습니다.

 

1. href를 사용하지 않는 방법: <a> 태그의 href 속성을 사용하지 않고, 클릭 이벤트만을 활용하여 화면 이동을 처리합니다.

 

<a href="javascript:void(0)" @click="pageMove('/move')">약관 동의</a>

 

2. 경로를 직접 지정하는 방법: href 속성에 직접 화면 이동에 사용할 경로를 지정합니다.

<a href="/move">약관 동의</a>

 

이렇게 하면 사용자가 한 번의 클릭으로 원하는 페이지로 이동할 수 있습니다. 이 두 가지 방법 중에 적합한 것을 선택하여 사용하시면 됩니다.