서론

---

프로젝트 진행중 스크롤을 아래로 한 상태에서 라우트를 이동시키면 해당 스크롤이 그대로 적용되는 경우가 발생하였다.

이번 포스팅에서는 위 문제를 해결한 개인적인 방법에 대해 공유하고자 한다.

본론

---

1. 1차 해결

이를 해결하기 위해 각각의 컴포넌트에 아래의 코드를 집어넣어 해결하였다.

mounted() {
  window.scrollTO(0, 0);
}

그러나 이렇게 했을 때, 문제가 있다.

1. 한 곳에서 관리할 수 없고 일일이 모든 컴포넌트에 적용시켜야한다.
2. 뒤로가기를 했을 때는 마운트가 되는 것이 아니라 실행되지 않는다.

사실 1, 2번 문제 모두 큰 결함이기 때문에 새로운 방법을 모색해야 했다.

2. 최종 해결법

최종 해결법은 App.vue에서 watch를 이용하여 $route 변경을 감시하는 것이다.

// App.vue
<script>
export default {
  name: "app",

  watch: {
    $route() {
      window.scrollTo(0, 0);
    },
  },
};
</script>

이렇게 처리하여 라우트가 변경될 때마다 무조건 최상단으로 스크롤을 변경하도록 하였다.

3. 최종 해결법의 고찰

보편적으로 검증된 것이 아니고 내가 생각해서 한 것이라 효율적인 측면에서 검토해 볼 필요가 있다.