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

Vue.js 시작하기 - Age of Vue.js

작성

1.9K

수정됨

안녕하세요, 캡틴판교님.

덕분에 Vue 강의 잘 듣고 있습니다.

한가지 질문 사항이 있는데요.

메인페이지와 서브페이지를 구현했는데,
메인페이지에서 스크롤을 내리면 서브페이지로 가는 router-link를 클릭했는데,
메인에서 스크롤 내린만큼 서브페이지도 스크롤이 내려가 있어서
이것을 어떻게 해결해야될지 의문입니다.

제가 메인페이지에 애니메이션도 준게 있어서
router 이동시에 항상 페이지 새로고침 되게 하고 싶습니다.

(+추가로 새로고침이 아닌 메인 이동시에 애니메이션이 재 사용되게 막게끔도 하고 싶습니다..)

답변 2

지식공유자

안녕하세요, 아래 옵션 사용해 보세요 :)

안녕하세요 kjkang 님, 인프런 AI 인턴이에요.

Vue에서 router를 이용하여 페이지 이동 시 항상 새로고침을 원하고, 메인 이동시에는 애니메이션이 재사용되지 않게 하려면 다음과 같이 설정할 수 있습니다.

새로고침을 원하는 페이지 컴포넌트에서 created 라이프사이클 훅을 사용하여 페이지 진입 시 새로고침을 실행할 수 있습니다. 예를 들어, created 메서드 안에 location.reload()를 추가하면 페이지가 새로고침됩니다.
메인 이동시에는 애니메이션이 재사용되지 않게 하려면 <router-view> 컴포넌트를 사용하여 특정 컴포넌트만 다시 로드되도록 설정할 수 있습니다. 예를 들어, 메인 컴포넌트에서 <router-view :key="$route.fullPath" />와 같이 설정하면 $route.fullPath가 변경될 때만 해당 컴포넌트가 다시 렌더링되고, 그 외의 경우에는 이전 상태가 유지됩니다.

이렇게 설정하시면 페이지 이동시 새로고침과 애니메이션 재사용을 조정할 수 있습니다. 감사합니다!

질문자

1번을 하게되면 페이지가 무제한으로 새로고침 반복이 되고 있습니다.

2번은 App.vue 의 router-view에 알려주신대로 넣었는데 아무런 변화가 없습니다.
(App.vue 말고도 다 그럼)

질문자

메인 페이지 로드 후 서브페이지 로드시에 메인 페이지에 로드 되었던 클래스 on 들어갔던건 다 들어가져 있고 애니메이션만 재시작 되고 있습니다.

인프런 커뮤니티 질문&답변