vue路由切换过渡

使用animate动画需要加前缀 animate__animated

```js
    <div class="area">
        <router-view v-slot="{ Component, route }">
            <!-- //路由过渡动效 -->
            <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
                <component :is="Component" :key="route.path" />
            </transition>
        </router-view>
    </div>

import { createRouter, createWebHashHistory } from 'vue-router'
//引入 动画
import 'animate.css'
//createRouter创建路由器实例，管理多个路由
export default createRouter({
  //路由模式
  history: createWebHashHistory(),
  //管理路由
  routes: [
    {
      path: '/home',
      name: 'home',
      meta: {
            title:'首页',
         transition: 'animate__fadeIn',
     
         },
      component: () => import('@/pages/home/index.vue'),
    },
    {
      path: '/article',
      name: 'article',
      meta: { 
        title:'文章',
        transition: 'animate__backInLeft' },
      component: () => import('@/pages/article/index.vue'),
    },
    {
      path: '/',
      redirect: '/home',
    },
  ],
    //滚动行为：控制滚动条位置,切换组件回到顶部
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },
})