Vue에서 route 스크롤 복구 하기

현재 카시나 쇼핑몰 홈페이지를 클론 코딩중인 과정에서,
뷰 라우터를 이용해서 페이지 이동을 하니, 이전 페이지 스크롤을 그대로 가져가는 문제점이 생겼다.

해결하고 싶은 문제점.
1. 다른 페이지로 라우트 이동 할때, 스크롤이 다시 위로 올라간 상태에서 보여야한다.
2. 반면에 뒤로가기를 누르면 이전 페이지 스크롤이 그대로 유지 되었으면 한다!

여러가지 문서를 찾다가 뷰 라우터 공식 문서를 찾게 되었다.
Vue Router 공식 문서(?)

정답은 바로

scrollBehavior (to, from, savedPosition) {} 

를 라우터 정의할때 같이 넘겨주면 된다.

scrollBehavior 는 to, from, savePosition 을 인자로 가지는데, to , from은 같이 정의가 되어야 하고 saveposition은 혼자 값을 줘도 된다. (to 혼자 값을 주면 esLint 빨간 오류가 바바박 )

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
});

실행 영상_유튜뷰로 이동