>웹 프론트엔드 >JS 튜토리얼 >Vue-Router의 스크롤 동작에 대한 자세한 설명

Vue-Router의 스크롤 동작에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-04-17 11:18:281772검색

이번에는 Vue-Router의 스크롤 동작동작에 대한 자세한 설명을 가져왔고, Vue-Router의 스크롤 동작 사용 시 노트는 무엇인지 살펴보겠습니다.

스크롤 동작

프런트 엔드 라우팅을 사용하면 새 경로로 전환할 때 페이지를 다시 로드하는 것처럼 페이지가 위로 스크롤되거나 원래 스크롤 위치를 유지하기를 원합니다. vue-router가 이를 수행할 수 있지만 경로를 전환할 때 페이지 스크롤 방법을 사용자 정의할 수 있는 것이 더 좋습니다.

참고:

이 기능은 HTML5 기록 모드에서만 사용할 수 있습니다. 라우터 인스턴스를 생성할 때 scrollBehavior 메서드를 제공할 수 있습니다:

var router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 메서드는 라우팅 개체와 주고받습니다. 세 번째 매개변수SavedPosition은 popstate

Navigation

(브라우저의 앞으로/뒤로 버튼에 의해 트리거됨)인 경우에만 사용할 수 있습니다. 이 메소드는 다음과 같은 스크롤 위치의 객체 정보를 반환합니다.

    { x: 숫자, y: 숫자 }
  • { 선택기: 문자열 }
  • 잘못된 부울 값이 반환되거나 빈 객체가 반환되면 스크롤이 발생하지 않습니다.

예:

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}
모든 경로 탐색의 경우 페이지를 맨 위로 스크롤하면 됩니다.

뒤로/앞으로 버튼을 누르면 저장된 위치로 돌아가는 것은 브라우저의 기본 동작처럼 작동합니다:

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

"스크롤하여 앵커" 동작을 시뮬레이션하려는 경우:

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Three.js 사용에 대한 자세한 설명


vue에서 Particles.js 라이브러리를 사용하는 방법


위 내용은 Vue-Router의 스크롤 동작에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.