Vue 페이지 이동 시 스크롤 복구하기

 router 이동시 스크롤이 움직이지 않는데? 

 

 

프로젝트 작업 도중, router를 통해 페이지를 이동하면 스크롤이 자동으로 복구되지 않고, 기존에 보던 부분에서 페이지가 이동되는걸 봐버렸다.😓코드리뷰에서도 다른분이 해당 부분을 지적받으셨기 때문에 역시 고치는 방향으로 작업을 수정했다. 스크롤 복구에 대한 부분은 구글링을 해봤다면 알겠지만 vue 공식문서에서도 소개하고 있다. 크게 어렵지 않으며, 내장되어 있는 함수를 사용하면 손쉽게 기능을 구현할 수 있다.

 

 

vue 공식문서에서 확인할 수 있는 스크롤 동작 내용

 

해당 내용은 공식문서에서도 설명하고 있지만, 스크롤 복구뿐만이 아니라 여러가지의 동작을 제어할 수 있는 함수이며, HTML5 히스토리 모드에서만 사용이 가능하다.

 

히스토리모드에 대해 잠깐 설명하자면, vue의 router는 기본적으로 hashbang(해쉬뱅)모드로, 주소에 #이 포함되어 있는 형태로 제공되는데 이부분을 제거하기 위해 사용하는 모드가 바로 HTML5 히스토리 모드다. 

const router = new VueRouter({
  routes: [...]
})

👇

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

선언한 router 인스턴스에 모드만 추가한 형태로, 이렇게 선언하게 되면 #가 빠져 정상적인 주소로 표시하게 해준다. 하지만 히스토리모드의 치명적인 단점이 있는데, 이부분은 공식문서를 통해 확인이 가능하며, 추후에 문제를 해결할 수 있는 방법에 대해 따로 포스팅하겠다.

 

 

---

 

 router 스크롤 복구하기! 

 

 

히스토리모드에 대해서도 어느정도 이해를 했다면 스크롤 조작을 시작할 수 있다. 선언했던 router 인스턴스에 하나의 함수만 선언해주면 간단히 해결된다!

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    // 원하는 위치 설정하기
  },
  routes: [...],
})

scrollBehavior에 사용되는 인자는 총 세가지로 필수선언은 아니다. 전역으로 함수가 실행되길 바란다면 인자값없이 선언하면 되고, 부분적인 페이지에서만 작동한다면 해당부분에 맞는 인자를 선언해주면 된다. 

 

• To : 첫번째 인자값으로 이동 후의 router 객체를 선언한다.

• Fetch: 두번째 인자값으로 이동 전의 router 객체를 선언한다.

• SavedPosition : 세번째 인자값으로 브라우저의 뒤로/앞으로 버튼으로 트리거 되는 popstate 네비게이션에서만 사용하는 인자다.

 

현재 작업중인 프로젝트에서는 전역페이지가 새로 router될 때, 페이지의 스크롤이 최상단으로 올라가는 것이 필요하기 때문에 인자값을 넣지 않고 선언한다.😎공식문서에는 router 아래에 선언을 했지만, 팀원들이 알아보기 쉽게 하기 위해 mode 다음에 작성했다.

export const router = new VueRouter({
  mode: "history",
  scrollBehavior() { 
    return { x: 0, y: 0 } 
  },
  routes: [...]
 )}

함수가 실행되면 가로와 세로축을 모두 0으로 리턴하라는 함수다. 이로써 스크롤이 복구되지 않았던 문제는 말끔하게 해결되었다! 만약 스크롤 조작을 해야하는 경우가 온다면 scrollBehavior 함수를 응용해보자!

 

 

---

 

 

기분전환으로 글씨체를 본명조체로 변경해보았다. 크기도 조금 키우고!☺️☺️☺️기존에 사용했던 폰트보다 가독성이 좋은 것같아 앞으로는 해당 폰트로 작성할것같은 기분이다.