[VUE] router - history에 따른 scroll 제어를 위한 scrollBehavior 사용법

서론

vue 개발을 하면서 스크롤 이슈가 자주 나온다. 그걸 해결하는 방법은 여러가지 있지만 이번엔 scrollBehavior 를 이용하여 제어하는 방법을 정리하고자 한다.

파일위치

상대경로 : src\router\index.js

 

소스

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // history back 일시 이전 스크롤 위치 이동 / 신규 페이지는 스크롤 top
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

 

소스 설명

 

router로 페이지 이동시 scrollBehavior가 호출되며 savePosition 정보가 있으면 이동 하이면 스크롤 최상단으로 가도록 개발하였다.

해당 소스에서 to, from은

from : 라우터 호출한 페이지

to : 라우터 이동할 페이지

이므로 특정 페이지에는 무조건 최상단으로 이동시키려면 to 데이터의 정보를 확인하여 최상단으로 이동시킨다.

 

테스트 확인

 

 

결론

vue를 개발하면서 고민을 많이 해야하는 history back 할때 스크롤 관리하는 부분을 정리하였다. 추후 다른 방법도 정리해보겠다.

 

GIT 주소

https://github.com/hjh830827/routertest