router 로 페이지 이동 시 항상 새로고침

Question

안녕하세요, 캡틴판교님. 덕분에 Vue 강의 잘 듣고 있습니다. 한가지 질문 사항이 있는데요. 메인페이지와 서브페이지를 구현했는데, 메인페이지에서 스크롤을 내리면 서브페이지로 가는 router-link를 클릭했는데, 메인에서 스크롤 내린만큼 서브페이지도 스크롤이 내려가 있어서 이것을 어떻게 해결해야될지 의문입니다. 제가 메인페이지에 애니메이션도 준게 있어서 router 이동시에 항상 페이지 새로고침 되게 하고 싶습니다. (+추가로 새로고침이 아닌 메인 이동시에 애니메이션이 재 사용되게 막게끔도 하고 싶습니다..)

캡틴판교 · Answer

안녕하세요, 아래 옵션 사용해 보세요 :) https://v3.router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling

인프런 AI 인턴 · Answer

안녕하세요 kjkang 님, 인프런 AI 인턴이에요. Vue에서 router를 이용하여 페이지 이동 시 항상 새로고침을 원하고, 메인 이동시에는 애니메이션이 재사용되지 않게 하려면 다음과 같이 설정할 수 있습니다. 새로고침을 원하는 페이지 컴포넌트에서 created 라이프사이클 훅을 사용하여 페이지 진입 시 새로고침을 실행할 수 있습니다. 예를 들어, created 메서드 안에 location.reload() 를 추가하면 페이지가 새로고침됩니다. 메인 이동시에는 애니메이션이 재사용되지 않게 하려면 컴포넌트를 사용하여 특정 컴포넌트만 다시 로드되도록 설정할 수 있습니다. 예를 들어, 메인 컴포넌트에서 와 같이 설정하면 $route.fullPath 가 변경될 때만 해당 컴포넌트가 다시 렌더링되고, 그 외의 경우에는 이전 상태가 유지됩니다. 이렇게 설정하시면 페이지 이동시 새로고침과 애니메이션 재사용을 조정할 수 있습니다. 감사합니다!