下文代碼基于
- 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 對象內(nèi)使用固定的某個動畫效果
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 鉤子處根據(jù) from 和 to 參數(shù)進行動態(tài)的判斷按厘，來指定特定的動畫效果
/**
* 路由動畫效果
*/
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';
}
});
