我想在vue路由切换之前 显示自定义的动画 而不是路由切换的动画

在 Vue 中，你可以使用 vue-router 的导航守卫（Navigation Guards）来实现路由切换前显示自定义动画的效果。

具体实现步骤如下：

1. 在你的 Vue 项目中安装 vue-router。

2. 在路由配置（router.js）中，为需要切换动画的路由设置 meta 属性，并在 meta 中定义 transitionName 属性，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        transitionName: 'slide'
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        transitionName: 'fade'
      }
    }
  ]
})

3. 在你的 App.vue 组件中，使用 transition 组件包裹 router-view 组件。同时，为 transition 组件设置 name 属性，并在 CSS 样式中定义相应的过渡动画。例如：

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform .5s;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

4. 在你的 App.vue 组件中，添加 beforeRouteUpdate 导航守卫函数。在该函数中，获取当前路由和目标路由的 meta.transitionName 属性值，并将其赋值给 App.vue 组件的 transitionName 属性。例如：

<script>
export default {
  data() {
    return {
      transitionName: ''
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.transitionName = to.meta.transitionName || 'fade'
    next()
  }
}
</script>

这样，当你切换到带有 meta.transitionName 属性的路由时，就会显示自定义的过渡动画了。当你切换到没有设置 meta.transitionName 属性的路由时，就会使用默认的路由切换动画。