const router = CreateRouter({
history : createWebHistory,
routes : [
...
{
name:'teams',
path:'/teams',
component:TeamsList,
children:[
name:'team-members'
...
]
}
],
scrollBehavior(to, from, savedPosition){
if(savedPosition){
return savedPosition;
}
return {left:0, top:0}
}
})
scrollBehavior 프로퍼티는 사실 메서드인데 페이지가 바뀔 때마다 Vue 라우터로 호출하는 메서드이다.
이는 3개의 매개변수를 갖고있는데 이중 to, from은 사실 라우트 오브젝트이다.
그래서 자동으로 this.$route를 갖고있다. 그래서 to는 .back()의 라우트 정보를 갖고있고 from은 현재 라우트 정보를 갖고있다.
그리고 savedPosition은 null인데 뒤로가기 버튼을 사용할 때만 해당 값을 설정하기 때문이다.
그래서 뒤로가기를 누르면 이동하기 전의 페이지에서 사용자 스크롤 위치가 어디였는지 나타내는 left와 top 프로퍼티가 들어 있다.