路由动效

1. 安装 animate.css 并且在 app.vue 中引入

npm install animate.css --save

2. routes 中的配置

const routes=[
    {
        path:"/login",
        Component:Login,
        meta:{
            title:"登录",
            transition:"animate__backInDown"  
        }
    }
]

3. router-view 写法

<router-view v-slot:default="{ route, Component }"> // 这里使用了 作用域插槽
    <transition :enter-active-class="`animate__animated  ${route.meta.transition}`">
        <component :is="Component"></component>
    </transition>
</router-view>