이번에는 Vue-Router의 스크롤 동작동작에 대한 자세한 설명을 가져왔고, Vue-Router의 스크롤 동작 사용 시 노트는 무엇인지 살펴보겠습니다.
스크롤 동작
프런트 엔드 라우팅을 사용하면 새 경로로 전환할 때 페이지를 다시 로드하는 것처럼 페이지가 위로 스크롤되거나 원래 스크롤 위치를 유지하기를 원합니다. vue-router가 이를 수행할 수 있지만 경로를 전환할 때 페이지 스크롤 방법을 사용자 정의할 수 있는 것이 더 좋습니다.
참고:이 기능은 HTML5 기록 모드에서만 사용할 수 있습니다. 라우터 인스턴스를 생성할 때 scrollBehavior 메서드를 제공할 수 있습니다:
var router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })
scrollBehavior 메서드는 라우팅 개체와 주고받습니다. 세 번째 매개변수SavedPosition은 popstate
Navigation(브라우저의 앞으로/뒤로 버튼에 의해 트리거됨)인 경우에만 사용할 수 있습니다. 이 메소드는 다음과 같은 스크롤 위치의 객체 정보를 반환합니다.
예:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!