vue-router 路由动画

下文代码基于

• vue 3.x
• vue-router 4.x
• vant（文中用到了 vant 的动画类，可替换其他动画库，如 animate.css 等）

App.vue

<router-view v-slot="{ Component, route }">
  <transition :name="(route.meta.transition as string ?? 'fade')">
    <component
      :is="Component"
      :key="route.path"
    />
  </transition>
</router-view>

router.ts

可在路由配置中的 meat 对象内使用固定的某个动画效果

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    redirect: '/index',
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/pages/login/login-page.vue'),
    meta：{
      transition: 'fade'
    }
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('@/pages/index/index-page.vue'),
    meta：{
      transition: 'fade'
    }
  },
];

animation.ts

也可在 router 的 afterEach 钩子处根据 from 和 to 参数进行动态的判断，来指定特定的动画效果

/**
 * 路由动画效果
 */
router.afterEach((to, from) => {
  // 来自 login 页面，画面左移切换
  if (['login'].includes(from.name as string)) {
    to.meta.transition = 'van-slide-left';
  }
  // 去往 login 页面，画面右移切换
  if (from.name && ['login'].includes(to.name as string)) {
    to.meta.transition = 'van-slide-right';
  }
});