[Vue.js][Ch4][영화검색 사이트] 검색 정보 초기화 및 페이지 전환 스크롤 위치 복구

버그 수정 및 최적화

버그 1. 영화 목록에서 상세 페이지로 이동하면 스크롤이 가장 아래로 내려가 있다.

버그 2. 상세 페이지에서 메인 페이지로 돌아가면 검색 요소는 초기화되어 있지만 영화 목록은 전에 검색한 목록이 표출된다.

vue router 홈페이지 > Advanced > Scroll Behavior 확인

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // always scroll to top
    return { top: 0 }
  },
})

• 페이지를 이동할 때마다 스크롤을 항상 최상단에서 시작할 수 있다.

버그 1 수정

route > index.js > scrollBehavior 함수 추가 

scrollBehavior() {
	return { top: 0 }
},

버그 2 수정

1. store > movie.js > mutations 옵션에 resetMovies 함수가 만들어져있다.

resetMovies(state) {
  state.movies = [];
  state.message = 'Search for the movie title!';   // 초기 상태 메시지
  state.loading = false;
}

2. Home.vue > 페이지가 메인 페이지로 이동될 때마다 movie 배열을 초기화해주는 resetMovies 함수 실행

<template>
  <Headline />
  <Search />
  <MovieList />
</template>

<script>
import Headline from '~/components/Headline'
import Search from '~/components/Search'
import MovieList from '~/components/MovieList'

export default {
  components: {
    Headline,
    Search,
    MovieList
  },
  created() {
    this.$store.commit('movie/resetMovies');
  }
}
</script>