VueRouter의 Transitions 파헤치기

Transition

앞전에 [[RouterView Slot]] 에서 배운 transition을 좀 더 활용하는 방법을 알아보겠습니다.
route의 meta태그를 이용하여 동적으로 <transition>을 컨트롤 할 수 있습니다.

 

동작 방식이나 방법은 앞서 배웠기에 자세한 설명은 생략하고 예시를 보겠습니다.
이전 글을 안보고 오셨다면 [[RouterView Slot]]을 먼저 보고 보시는걸 추천합니다.

const routes = [
    {
        path: '/custom-transition',
        component: PanelLeft,
        meta: { transition: 'slide-left' },
    },
    {
        path: '/other-transition',
        component: PanelRight,
        meta: { transition: 'slide-right' },
    },
]

<router-view v-slot="{ Component, route }">
    <!-- Use a custom transition or fallback to `fade` -->
    <transition :name="route.meta.transition || 'fade'">
        <component :is="Component" />
    </transition>
</router-view>

 

Navigation Hook을 이용해서 동적으로 사용할 수도 있겠죠??

router.afterEach((to, from) => {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})

Forcing a transition between reused views

간혹 <router-view>가 말성일 경우가 있습니다.
기본적인 라우터의 동작이외에 :params로 동작하는 경우가 이에 해당할 수 있겠죠.

보통 REST API를 따를 경우 간혹 문제가 야기 되는데요.

 

예를 들어봅시다.

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/users/:id',
        name: 'profile',
        component: UserDetail
    },
    // ...
]

 

위의 경우 /user에서 후미에 따라오는 id값에 따라 회원정보를 비동기로 조회해 오는 코드를 보통 사용합니다.

웹페이지를 돌아다니다보면 /를 기준으로 ?(query string)가 아닌 데이터를 바인딩하는 방식인거죠.

여기서의 한가지 문제는 /에서 /users/james로의 이동은 문제가 발생하지 않습니다.

하지만..... /users/james에서 /users/tomas에서는 페이지가 로드되지 않는 문제가 발생할 수 있습니다.

/users를 통해 이미 UserDetail이라는 컴포넌트가 이미 로드가 완료된 상태인 겁니다.

이미 구성된 요소들이 있으니, 데이터를 다시 로드하지도 않는 것이죠.

Vue에서 라우터가 동일한 구성요소가 처리되는 경우 변경사항을 인식하지 못하는 것 같습니다.

 

이때 해결할 수 있는 방법이 아래와 같이 :key를 사용해 고유값을 만들어 주는 것입니다.
:key란 Vue.js에서 사용하는 :key와 동일합니다.

<router-view v-slot="{ Component, route }">
    <transition name="fade">
        <component :is="Component" :key="route.path" />
    </transition>
</router-view>