[vue.js] 페이지 이동 시 Offset 변경

페이지 이동 시 Vue 라이프 사이클에 기반하여 offset을 변경하는 방법

1. Purpose

Vue를 이용한 홈페이지 내에서는 라우팅 이동을 할 때 Page Offset (화면에서 어느 위치에 있었는지)가 유지된다. 즉, 이전 화면의 맨 아래에서 다른 화면으로 이동할 경우 새로운 홈페이지의 맨 아래에 위치하게 된다는 것이다. VanilaJS에서는 window.scrollTo(x, y) 를 그냥 이용하면 되지만, Vue.js는 컴포넌트 단위로 작동하기 때문에 기본적인 함수 사용은 동일하지만 조금 다르다.

2. Usage

위에서 언급한 것과 같이 window.scrollTo(x, y) 를 사용하면 된다. 다만, 컴포넌트 단위의 개발을 하는 Vue의 경우 window 와 같은 전역 객체를 사용하기 쉽지 않기 때문에 Vue 라이프 사이클에 기반하여 사용하여야 한다. (자세한 내용은 추구 Vue 라이프 사이클 대한 포스팅에서 언급 예정) 일단 해당 컴포넌트 페이지로 이동하였을 때 화면의 최상단으로 이동하기 위해서는 아래와 같은 코드를 사용하면 된다.

mounted () {
  window.scrollTo(0, 0)
}

정말 짧은 코드이지만 간단히 설명을 하자면, mounted 는 해당 컴포넌트를 마운트하였을 때 실행하는 코드이다. 즉, 해당 컴포넌트를 마운트하자마자 Page Offset을 (0, 0)으로 이동한다는 의미이다. 혹시라도 Vue 라이프 사이클에 대한 이해가 부족한 경우 공식 문서에서 확인 가능하다.

3. Reference

1. Vue.js scroll to top on route change [link]