Vue router 이동 시, 페이지 최상단으로 이동

1. 문제 정의

Vue.js 를 이용하여 프로젝트를 진행하고 있습니다.

이와 같이 모집안내, 지원하기를 클릭 시 vue router를 이용하여 페이지 이동을 진행하고 있는데, 여기서 문제점이 있습니다.
바로 페이지를 이동하면 그 카테고리에 해당하는 최상단을 보여주는 것이 아닌, 현재 스크롤 위치 그대로 페이지를 랜더링 한다는 점입니다.

이번 포스팅에서는 이러한 문제를 해결해보도록 하겠습니다.

2. Scroll Behavior

Vue3를 이용한 현재 프로젝트는, 페이지간 이동을 Vue Router를 이용해서 진행하고 있습니다.
src/router/index.js 에서 스크롤 설정을 추가해주도록 하겠습니다.

import { createRouter, createWebHistory } from 'vue-router'
import ApplyInfo from './views/ApplyInfo.vue'
import ApplicationPage from './views/ApplicationPage.vue'

const routes = [
  {
    path: '/recruit',
    name: 'recruitment',
    component: ApplyInfo
  },
  {
    path: '/apply',
    name: 'applyInfo',
    component: ApplicationPage
  },
  // ... 다른 라우트 정의들
]

// 추가된 코드
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior() {
    return { left: 0, top: 0 }  // 모든 라우트 변경시 페이지의 최상단으로 스크롤
  }
})

export default router

이와 같이 scrollBehavior를 추가해준다면, 라우팅될 때 개발자가 원하는 행동을 지정해줄 수 있게 됩니다.