다음 구성 요소로 경로를 변경할 때 자동으로 맨 위로 스크롤하지 마십시오.

다음 구성 요소로 경로를 변경할 때 자동으로 맨 위로 스크롤하지 마십시오.

내 Vue/Vuetify 단일 페이지 앱에서 페이지를 아래로 스크롤하고 페이지 하단의 링크를 클릭하면 경로가 변경되어 다음 페이지로 이동하지만 다음 페이지/컴포넌트의 맨 위로 스크롤되지 않습니다.

그 결과, 첫 페이지가 길고 두 번째 페이지의 내용이 적으면 두 번째 페이지의 내용이 부족하다는 인상을 준다.사용자가 페이지 맨 위로 스크롤해야 내용이 표시되기 때문입니다.

페이지 01 - 긴 목록 중 하나일 뿐입니다.

페이지 02 - 다음 컴포넌트가 중간에 로딩됩니다.

vue-router's를 사용할 수 있습니다.scrollBehavior페이지 탐색에서 스크롤 위치를 변경하는 방법.대신created () { window.scrollTo(0, 0) }다음을 사용합니다.

new VueRouter ({
  routes: [...],
  scrollBehavior () {
    return { x: 0, y: 0 }
  }
})

자세한 예는 vue-router 설명서를 참조하십시오.
https://router.vuejs.org/guide/advanced/scroll-behavior.html

언급URL : https://stackoverflow.com/questions/47309678/when-route-change-to-next-component-dont-scroll-to-the-top-automatically