vue 路由动画

安装 npm i -S animate.css
main.ts 引入
import 'animate.css';

router

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    alias: ['/login'],
    component: () => import('@/views/Login.vue'),
  },
  {
    path: '/index',
    meta: {
      requireAuth: true,
      transition: 'animate__fadeInDownBig', // 只让这个页面在加载的时候有动画
    },
    component: () => import('@/views/Index.vue'),
  },
];

app.vue

<template>
  <!-- route 是当前路由的信息 -->
  <!-- Component 是当前的VNode -->
  <router-view #default="{route, Component}">
    <transition :enter-active-class="`animate__animated  ${route.meta.transition}`">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<script setup lang="ts"></script>

<style scoped></style>