Vue3でルーターにトランジションを追加する

はじめに

Vue3（Vue Router 4）でルーター使用時のページ遷移にトランジションを追加する際の、Vue2との変更点をまとめました。

Vue２での書き方

// App.vue
<template>
  <div id="app">
    <transition name="slide" mode=”out-in”>
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.5s,transform 0.5s;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform:translate(-30%)
}
</style>

Vue2でルーターにトランジションを追加する記述は、簡単に書くとこんなかんじです。今までは、router-viewをtransitionで囲んで、CSSでアニメーションを追加するだけでした。

Vue3での変更点

Vue3ではtransitionの囲み方が変わりました。

// App.vue
<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="slide" mode="out-in">
        <component :is="Component" :key="$route.path" />
      </transition>
    </router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.5s,transform 0.5s;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform:translate(-30%)
}
</style>

router-viewでtransitionを囲んで、更に中にcomponentが来ます。
なんとなく今まで通り書くと動かずあれ？っとなるので注意したいです。

参考：https://vueschool.io/lessons/route-transitions?friend=vuerouter