（二十六）路由过度动画

// 使用封装的 router-link 来做
<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>

  {/* v-slot 还接受第二个参数 router */}
  <router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition || 'fade'" mode="out-in">
      <component :is="Component" />

      <!-- 对于 /1，/2类似的跳转，组件会进行复用，过渡不会执行。添加 key 可以强制执行过渡 -->
      <!-- <component :is="Component" :key="route.path" /> -->
    </transition>
  </router-view>
</template>
<script></script>

const routes = [
  {
    path: "/",
    component: BlogListPage,
    meta: {
      transition: "fade",
    },
  },
  {
    path: "/:postId",
    component: BlogPostPage,
    meta: {
      transition: "fadeAndMove",
    },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});