下文代码基于
- 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';
}
});
