다른 페이지로 이동할 때 ScrollPosition이 맨 위로 설정되지 않았습니다.

Question

웹페이지는 마스터-슬레이브 접근 방식을 사용하여 설계되었습니다. 마스터에는 클릭하면 슬레이브(오른쪽 창)에 해당 페이지가 표시되는 탭(왼쪽 창)이 있습니다. 예를 들어. 마스터에는 기본적으로 스키마가 표시되는 "스키마 및 템플릿"이라는 두 개의 탭이 3개 있습니다. 사용자는 왼쪽 창(마스터 페이지에 의해 로드됨)에 있는 탭을 사용하여 이 두 페이지(슬레이브 페이지에 의해 로드됨) 사이를 탐색할 수 있습니다.

이제 사용자가 스키마 페이지의 특정 위치로 스크롤하여 템플릿 페이지로 이동할 때 스크롤 위치가 맨 위로 설정되지 않습니다. 그러나 스크롤 동작은 라우터 파일에 설정됩니다.

const createRouter = () =>
  새로운 VueRouter({
     스크롤 동작: () => ({ x: 0, y: 0 }),
     경로:[
     //모든 경로가 있습니다
     ]
});

scrollBehavior 근처에 중단점을 설정하고 관찰할 때 탐색이 있을 때마다 줄이 적중되지만 아키텍처에서 템플릿 페이지로 탐색할 때 스크롤 위치가 맨 위로 설정되지 않습니다.

그러나 템플릿 페이지의 특정 위치로 스크롤하여 아키텍처 페이지로 이동하면 해당 페이지가 맨 위로 설정됩니다.

또한 template.ts의 Mounted() 내부에 window.scrollTo(0, 0); 함수를 작성해 보았습니다. 클릭해도 페이지가 맨 위로 설정되지 않습니다.

왜 이런 일이 발생하는지 설명해 주실 수 있나요? 나는 stackoverflow에 나열된 거의 모든 가능한 솔루션을 시도했습니다.

Answer 1

vue에서도 이 문제가 발생했습니다. 맨 위로 스크롤하려면 이 트릭을 사용해야 합니다. window.scrollTo(0, 0); setTimeout에서 사용하는 대신 시간 초과가 매우 작습니다.
settimeout(()=>{ window.scrollTo(0, 0); }, 10)
도움이 되었기를 바랍니다.