[vue.js] 라우터 이동시 스크롤 위치 상단이동

Vue 프로젝트 작업때 스크롤을 내린 후에 라우터 이동을 하면 이전의 스크롤 위치 그대로 새로운 라우터에도 적용이 되어지게 됩니당

하지만 보통은 페이지 이동시에는 제일 상단으로 원위치 시켜줘야하죱

 

 

Vue에 이런한 작업을 해주는 내장함수가 있더라구요ㅎ_ㅎ!!!

하지만 history모드일때만 적용이 가능하다고합니다 속닥...

 

 

- Vue의 history와 hash mode에 대해서는 아래글에 정리해두었어습니다!

 

[vue.js] hash mode는 도대체 뭐지?

 

 

 

무튼 엄청 간단하게도 라우터를 생성할때 scrollBehavior라는 내장함수를 호출하고 top을 리턴해주면 됩니다👏👏

 

 

 

const router = createRouter({
  scrollBehavior() {
    return {top: 0};
  },
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

 

 

원하는 위치가 있다면 return 부분에 적용시켜주면 될듯하네요😊