[Vue.js] 영화 검색 사이트 예제 - 36. 검색 정보 초기화 및 페이지 전원 스크롤 위치 복구

현재 예제에서 영화를 30개 검색한 뒤 스크롤을 밑으로 내려서 클릭해보면, 스크롤이 유지된 채 movie로 이동한다.

직관적이지 않다

또한, 이 상태에서 다시 HOME으로 이동하면, 이전 검색 키워드는 제거됐으나 검색 결과는 아직 남아있다.

페이지 이동시 스크롤 초기화하기

참조) Scroll Behavior | Vue Router (vuejs.org)

Scroll Behavior | Vue Router

/src/routes/index.js

검색 결과 초기화하기

/src/store/movie.js

mutations에 resetMovies 메소드를 작성한다.

/src/routes/Home.vue

created 라이프사이클에 해당 메소드가 실행되게 만들면 HOME으로 갈 때마다 resetMovies가 실행된다.