vue에서 페이지 이동 후 원본 페이지의 초기 위치로 돌아가는 방법

아래에서는 Vue 페이지 점프 후 원래 페이지의 초기 위치로 돌아가는 방법을 공유해 드리겠습니다. 참고할 만한 가치가 있어 모두에게 도움이 되기를 바랍니다.

vue 페이지가 새 페이지로 이동한 후 새 페이지에서 원래 페이지로 돌아온 후 원래 페이지의 초기 위치로 돌아가고 싶은 경우 이 문제를 해결하는 방법은 무엇인가요? 우선 페이지 밖으로 뛰어내릴 때 튀어나온 스크롤Y를 기록해야 하는데, 원래 페이지로 돌아갈 때 기록된 스크롤리로 복귀 위치를 설정하면 됩니다. 전체 환경은 vue-cli

첫 번째, main.js에서 vuex를 구성합니다

//引用vuex 
import Vuex from 'vuex' 
Vue.use(Vuex)

두 번째, main.js에서 vuex 상태 관리

var store = new Vuex.Store({ 
 state: { 
 recruitScrollY:0 
 }, 
 getters: { 
 recruitScrollY:state => state.recruitScrollY 
 }, 
 mutations: { 
 changeRecruitScrollY(state,recruitScrollY) { 
 state.recruitScrollY = recruitScrollY 
 } 
 }, 
 actions: { 
 
 }, 
 modules: {} 
})

Three, 목록보기 페이지와 세부정보 페이지가 있습니다. 목록보기 페이지는 세부정보 페이지로 이동한 후 세부정보 페이지로 이동하기 전의 위치로 돌아갑니다

.

beforeRouteLeave(to, from, next) { 
 let position = window.scrollY //记录离开页面的位置 
 if (position == null) position = 0 
 this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来 
 next() 
 }, 
 watch: { 
 '$route' (to, from) { 
 if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面，或者原始页面 
 let recruitScrollY = this.$store.state.recruitScrollY 
 window.scroll(0, recruitScrollY) 
 } 
 } 
 }

IV, 생성된 라이프사이클의 실행을 피하고 싶다면 캐시 keepAlive를 사용할 수 있습니다. 여기에서도 공유하겠습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:

vue 모바일 터미널에서 날짜 선택 구성 요소 구현

노드를 사용하여 내장 디버깅 구현

react webpack 패키지 파일(자세한 튜토리얼)

위 내용은 vue에서 페이지 이동 후 원본 페이지의 초기 위치로 돌아가는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!