vue 는 keep-alive 를 사용 하여 스크롤 바 위 치 를 유지 하 는 실현 방법

머리말
퇴근 하기 20 분 전에 한 편...
간단하게 소개 합 니 다.keep-alive 를 사용 할 때 이전 페이지 로 돌아 가 스크롤 바 위 치 를 유지 하지 않 았 습 니 다.
사실 keep-alive 를 사용 하지 않 아 도 위 치 는 기록 되 지 않 았 다.
하지만 keep-alive 가 적용 되 지 않 을 때 페이지 내용 이 새로 고침 되 기 때문에 그냥 내 버 려 두 었 습 니 다.
사고의 방향
공식 적 으로 scrollBehavior링크를 추천 합 니 다.그러나 위 에 표 시 된 것 은 history.pushstate 의 브 라 우 저 에 만 효력 이 발생 합 니 다.history.pushstate 를 켜 야만 사용 할 수 있 는 지 모 르 겠 습 니 다.이 루어 지 는 것 을 보 니 우호 적 이지 않 습 니 다.직접 만 드 는 것 이 좋 겠 습 니 다.
사고 방향 을 실현 하 는 것 은 이 렇 습 니 다.먼저 경로 에 대상 meta 를 추가 합 니 다.

meta: {
  keepAlive: true,
  scrollTop: 0,
}

keepAlive 는 페이지,scrollTop 기록 페이지 의 스크롤 위 치 를 유지 해 야 합 니까?
그리고 app.vue 에 다음 입 구 를 추가 합 니 다.

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

이렇게 해서 keep-alive 를 사용 합 니 다.
그리고 전역 main.ts 에 전역 루트 제 어 를 추가 합 니 다.

router.beforeEach((to: Route, from: Route, next: () => void) => {  
  if (from.meta.keepAlive) {
  const $content = document.querySelector('#content');
  const scrollTop = $content ? $content.scrollTop : 0;
  from.meta.scrollTop = scrollTop;
 }
 next();
});

간단 합 니 다.떠 날 때 현재 페이지 를 유지 해 야 하 는 지 여 부 를 판단 합 니 다.필요 하 다 면 페이지 메 인 용기 content 의 스크롤 위 치 를 기록 하고 길 을 기록 합 니 다.
그리고 유지 되 는 페이지 에 들 어 갈 때마다 스크롤 바 위치 scrollTop 을 읽 고 메 인 용기 의 scrollTop 을 수정 하면 됩 니 다.

public activated() {
  const scrollTop = this.$route.meta.scrollTop;
  const $content = document.querySelector('#content');
  if (scrollTop && $content) {
   $content.scrollTop = scrollTop;
  }
}

간단 해 보이 네.
남 겨 진 문제
1.페이지 마다 스크롤 바 위 치 를 기록 할 수 있 지 않 습 니까?
사실은 그렇지 않 습 니 다.어떤 페이지 는 내부 에 js 상호작용 이 있 습 니 다.예 를 들 어 tab 상호작용,서로 다른 tab,페이지 가 굴 러 갈 수 있 는 높이 가 일치 하지 않 습 니 다.만약 에 페이지 상 태 를 유지 하지 않 고 스크롤 위 치 를 통일 적 으로 기록 하면 스크롤 바 의 위치 가 잘못 될 수 있 습 니 다.
2.activated 라 는 단 계 를 전역 의 main.ts 또는 state 에 쓸 수 있 습 니까?
그런 생각 을 했 지만 지금 으로 선 실현 할 방법 을 찾 지 못 했다.
우선,router 를 통 해 제어 할 수 없다 면 전체 경로 통 제 는 페이지 로 불 러 오기 전에 만 감청 할 수 있 고 페이지 로 불 러 오 는 요 소 를 찾 을 수 없습니다.
일반적인 전역 함수 에 써 서 제어 할 수 있 습 니 다.예 를 들 어 state 를 정의 하고 페이지 가 불 러 올 때 설정 하면 mixins 를 정의 하여 처리 해 야 합 니 다.그러나 이 mixins 에 대해 잘 모 르 기 때문에 어떻게 해 야 할 지 모 르 겠 습 니 다.시간 이 있 으 면 방법 을 찾 아 해결 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.