라우터에 animation적용하기 (vue2.ver)

• 우선 animation이기 때문에 당연 <transition> 과 관련이 있다.

<tamplate>
	<transition name='route'>
    	<router-view></router-view>
    </transition>
</tamplate>

<style>
.route-enter-active{}
</style>

• 그리고 이때는 animation을 적용하기에 route-enter-from, route-enter-to가 필요없고 -active만 필요하다.

라우터에 animation적용하기 (vue3.ver)

<router-view v-slot:"slotProps">
	<transition name="route">
    	<component :is="slotProps.Component"></component>
	</transition>
</router-view>

• router-view가 내부에서 렌더링될 콘텐츠 가져오기를 지원하기 때문에 활성화된 라우트에 따라 실제 페이지, 즉 실제 컴포넌트가 어디서 렌더링될지도 알려줘야 한다.

• 이를 위해서는 router-view를 통해 범위가 지정된 슬롯 구문을 내부적으로 쓰면 된다.

• 보통은 없어도 되지만 route와 transition을 함께 쓸 때는 필요하다.

• v-slot 디렉티브를 사용해서 slotProps를 추출해 여기 넣고 내장 router-view 컴포넌트에서 얻을 수 있다.
  그리고 동적 컴포넌트 component를 써서 slotProps.Component에 바인딩해준다.

• 즉, slotProps는 현재 선택된 라우트에서 로드되어야 할 컴포넌트를 갖는 Component라는 프로퍼티를 가지게 된다.
  이때 대문자 C이다.

isReady

• 이때 문제가 있는데 처음 로드할 때도 animation이 재생된다. 그 이유는 router-view에서 엄밀히 따지면 첫 활성 라우트가 빈 라우트(/)이기 때문인데, 페이지가 시작될 때, 즉 페이지가 처음으로 로드될 때 그 즉시 URL에서 지정한 경로로 사용될 라우트로 전환되는데 이는 앱이 시작될 때 router-view는 라우트가 없는 상태에서 주어진 경로의 라우트로 이동한다는 뜻이다.

• 빈 컴포넌트에서 로드되는 컴포넌트로의 이동이 일어나기 때문에 애니메이션이 재생되는 것이다.
  말하자면 / 초기 index 페이지도 로드해온다는 뜻이므로 2번 animation이 재생되버린다.

import router from path..

router.isReady().then(function (){
    app.mount('#app');
});

• router.isRead() 메서드는 적절한 페이지가 로드되고 이를 라우터가 성공적으로 확인했을 때 알려준다.
  프로미스가 생기니 then을 호출해야 하고 이 then 블록에 함수(function)을 전달하면 라우터는 빈 페이지에서 선택될 페이지로 이동하는 대신 이 함수 덕에 로드되어야 할 페이지를 인식함으로써 초기 전환을 수행하지 않게 만든다.

• 라우터가 완전히 설정되고 로드할 페이지를 인식한 후에만 앱을 마운트 및 렌더링하도록 함수 내부에 앱을 마운트하면 된다.