검색 정보 초기화 및 페이지 전환 스크롤 위치 복구

스크롤을 첫 화면에서 제일 밑으로 하고 다음 페이지로 이동하면 스크롤 위치가 제일 밑으로 되어 이동되는 현상 방지하는 방법

 

스크롤 동작 | Vue Router (vuejs.org)

스크롤 동작 | Vue Router

 

router --> index.js 코드 추가

export default createRouter({
  // 화면이동시 스크롤 위치 제일 위쪽으로 설정
  scrollBehavior() {
    return {top: 0}
  },

 

다시 메인으로 이동시 검색 초기화 설정

store -> movie.js 코드 수정

export default {
  // module!
  namespaced: true,
  //data!
  state: () => ({
    movies: [],
    message: _defaultMessage,
    loading: false,
    theMovie: {}
  }),
  // computed!
  getters: {
    // 실제 데이터를 계산해서 새로운 데이터 형식으로 반영할때 사용
    
  },
  // methods!
  // 변이: 관리하는 데이터를 변경시켜줄수 있다. 다른 메소드에서 변경할 수 없다.
  mutations: {
    // ['movies', 'message', 'loading']
    updateState(state, payload) {
      Object.keys(payload).forEach(key => {
        state[key] = payload[key]
        
      })
    },
    // assignMovies (state, Search){
    //   state.movies = Search
    // },
    
    // 화면 이동시 초기화 설정
    resetMovies(state) {
      state.movies = []
      state.message = _defaultMessage
      state.loading = false
    }
  },