vue2.0 라우팅 전환 후 페이지 스크롤 위치가 변경되지 않는 BUG 해결 방법

이제 vue2.0 라우팅 전환 후 페이지 스크롤 위치가 변경되지 않는 버그에 대한 해결 방법을 공유하겠습니다. 좋은 참고 값이 있어 모든 분들께 도움이 되기를 바랍니다.

최근 프로젝트에서 이러한 문제가 발생했습니다. Vue가 경로를 전환하면 페이지에서 상단까지의 스크롤 거리가 변경되지 않습니다.

<a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a>
<router-link class="db" to="/user">个人中心</router-link>

useRightNow(){
 if(判断用户存在){
  this.$router.push('/user')
 }else{
  this.$router.push("/login")
 }
}

해결 방법은 매우 간단합니다. 다음과 같이 Watch 라우팅 변경을 직접 모니터링한 다음 몸체의 스크롤 거리 ScrollTop을 0으로 할당합니다.

export default {
  watch:{
   '$route':function(to,from){
　　　　　　　　　　 document.body.scrollTop = 0；
     document.documentElement.scrollTop = 0; 
   }
  }
 }

추가: 해시 모드는 위의 문제만 발생시키며, vue 공식 웹사이트에는 기록 모드에서 더 나은 솔루션이 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Angular4는 ng2-file-upload의 업로드 구성 요소를 통합합니다.

nodejs acl의 자세한 사용자 권한 관리

nodejs에서 XML 문자열을 객체로 구문 분석하는 방법을 구현하는 방법의 예

위 내용은 vue2.0 라우팅 전환 후 페이지 스크롤 위치가 변경되지 않는 BUG 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!