[vuejs] 라우터 이동 시, 스크롤 이동

 

 

스크롤이 내려간 상태에서, 라우터로 페이지를 이동하는 이벤트를 발생시킬 때

전환된 페이지의 스크롤 위치가 그대로 남아있는 문제 발생

 

해결은 매우 간단하다.

라우터 인스턴스에 해당 메서드를 추가한다.

 

나의 경우에는 스크롤을 최상단으로 올려야해서 좌표를 저렇게 주었다.

 

const router = new VueRouter({
	...
    scrollBehavior(to, from, savedPosition) {
    	return { x :0, y: 0};
    }
})

 

 

---

참고 

(예시에 top을 0으로 주라고 적혀있으나, 에러 표기가 나길래 x, y 좌표로 주었음)

 

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

Vue Router | The official Router for Vue.js