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

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!