Vue - 페이지 이동시 onMounte 동작하지 않을 때 해결방법

 

Vue3에서 페이지를 변경했는데 해당 페이지에 컴포넌트에서 onMounted 훅을 타지 않는 이유는 컴포넌트가 실제로 언마운트되지 않고 재사용되었을 가능성이 있습니다.

 

이전페이지에서도 사용하는 컴포넌트를 이동한페이지에서 사용한다면 컴포넌트 재사용으로 마운트 하지않는경우 발생

 

해결방법
- 해당 컴포넌트에 :key 값을 추가하여 컴포넌트를 완전히 새로 마운트하도록 합니다. 

 이 방법은 router-view가 라우트 경로가 바뀔 때마다  컴포넌트를 완전히 새로 마운트하도록 강제합니다.
 그 결과 onMounted() 훅도 매번 새롭게 실행됩니다.

<test :key="$route.fullPath" />