[vue-router] Scroll Behavior

client-side 라우팅을 할 때, 새로운 라우트로 이동 할 때 스크롤을 맨 위로 위치하게 하거나, 페이지를 다시 로드 했을 때 스크롤 위치를 유지하게 할 수 있습니다. 심지어 스크롤 위치를 원하는데로 커스터 마이징 할 수도 있습니다.

이 기능은 브라우저가 history.pushState를 제공 해야 동작합니다.

1. scrollBehavior 함수

vue-router 인스턴스를 생성할 때 scrollBehavior 함수를 정의하면 됩니다.

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
  }
})

전달 인자

scrollBehavior 함수는 to와 from, savedPosition을 전달인자로 받습니다. savedPosition은 브라우저의 앞으로 가기 혹은 뒤로 가기 동작인 popstate 네비게이션에만 사용할 수 있습니다.

리턴값

scrollBehavior 함수는, { x: number, y: number } 또는 { selector: string, offset? : { x: number, y: number }} 두가지의 객체를 리턴해야 합니다. falsy 값(거짓으로 판단되는 값들.. 0, 공백 등..) 혹은 빈 객체를 리턴할 경우 스크롤이 일어나지 않습니다.

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

위의 예제는 네이게이션이 될 때마다 스크롤이 최상단으로 이동하는 예제입니다.

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

앞으로 가기/뒤로 가기 버튼을 눌렀을 때, 위의 코드와 같이 savedPosition을 리턴 할 경우 native와 유사한 동작을 하게 됩니다.

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
      // , offset: { x: 0, y: 10 }
    }
  }
}

위크 코드와 같이 라우트 메타 필드를 이용하면 좀더 세분화 된 스크롤 동작을 조작할 수 있습니다.

2. Async Scrolling

2.8.0에 새롭게 추가된 기능입니다.

scrollBehavior 함수가 Promise를 리턴할 수도 있습니다. 스크롤 되기 원하는 위치를 resolve 함수의 인자값으로 전달 하면 됩니다.

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

좀 더 다양한 구현이 가능하여, 페이지가 전환될 때 스크롤 동작을 좀 더 멋있게 나타낼 수 있습니다.

참고

• https://router.vuejs.org/guide/advanced/scroll-behavior.html