[Vue.js] router 변경 감지 + 스크롤 최상단

슈퍼만쓰·2021년 12월 2일
0
post-thumbnail

필요성

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

1차 해결

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

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

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

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

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

최종 해결법

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

// App.vue

<script>
export default {
  name: "app",

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

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

최종 해결법의 고찰

  1. 보편적으로 검증된 것이 아니고 내가 생각해서 한 것이라 효율적인 측면에서 검토해 볼 필요가 있다.
profile
https://mahns.oopy.io/ 블로그 이전

0개의 댓글