Vue.js 스크롤 통제

강정우·2023년 4월 4일
0

vue.js

목록 보기
24/72
post-thumbnail
post-custom-banner

scrollBehavior

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 프로퍼티가 들어 있다.

  • savedPosition의 null의 유무로 이전에 있던 값을 지정하여 뒤로갔을 때 사용자가 봤던 마지막 위치도 지정할 수 있다.
profile
智(지)! 德(덕)! 體(체)!
post-custom-banner

0개의 댓글