vue가 이전 페이지로 돌아갈 때 원래 스크롤한 위치로 돌아갑니다

1265 단어 vue.jsvue.js 진급의 길
프로젝트가 끝났을 때 테스트를 할 때 첫 페이지의 상품 목록에서 몇 페이지를 위로 미끄러진 후에 클릭하여 상세한 내용으로 들어가고 상세한 페이지에서 상품 목록으로 돌아갈 때 페이지가 맨 위로 돌아간다. 테스트를 통과하지 못하면 사용자 체험이 좋지 않다고 한다. 어디서 클릭하여 이 페이지로 돌아가라고 할 때 원래의 스크롤 페이지로 돌아간다.
사고방식: vue는 단일 페이지 응용 프로그램이기 때문에 다른 페이지에 들어갈 때 이 페이지를 삭제하고keep-alive로 새로 고치지 못하게 한다. 구체적으로 다음과 같다.
(1).App.vue에 가입:

(2).index.js 페이지
export default new Router({
  routes: [{
    path: '/',
    name: 'index',
    component: index,
    meta: {
      keepAlive: true
    }
  },

이렇게 index에서.vue에서, mounted 방발은 한 번만 가고, 브라우저에서 원래 굴러간 위치로 돌아가는 목적을 실현했다.하지만 핸드폰에서 테스트를 해보니 소용이 없었고,
휴대폰의 목적 달성을 해결하는 방법:
//            
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
//      ，            
beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  },

XML 분석 에 존재 하 는 안전 문제 안내
snmp 학습 노트 의 3－netsnmp Agent 개발

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage