安装 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>