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

 

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

 

1. /src/routes/index.js 수정

 

- scrollBehavior() 추가

...

export default createRouter({
  history: createWebHashHistory(),
  scrollBehavior() {
    return { top: 0 }
  },
  routes: [
    ...
  ]
})

 

2. /src/store/movie.js 수정

- resetMovies() 수정

import axios from 'axios'
import _uniqBy from 'lodash/uniqBy'

const _defaultMessage = 'Search for the movie title!'

export default {
  namespaced: true,
  state: () => ({
    ...
  }),
  getters: {},
  mutations: {
    ...
    },
    resetMovies(state) {
      state.movies = []
      state.message = _defaultMessage
      state.loading = false
    }
...

 

3. /src/routers/Home.vue 수정

- created() 추가

...
export default {
  components: {
    ...
  },
  created() {
    this.$store.commit('movie/resetMovies')
  }
}
...

 

---

 

참고

https://next.router.vuejs.org/guide/advanced/scroll-behavior.html

Scroll Behavior | Vue Router