废话不多说,直接上代码!!!!
直接复制就能用
<template>
<div>
<!-- vue3.0配置 -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transitionName">
<keep-alive v-if="$route.meta.keepAlive">
<component :is="Component" />
</keep-alive>
<component :is="Component" v-else />
</transition>
</router-view>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
watch: {
$route(to, from) {
if (to.meta.level > from.meta.level) {
to.meta.transitionName = "slide-left";
} else {
to.meta.transitionName = "slide-right";
}
},
},
});
</script>
<style lang="scss">
/*
动画样式
will-change: transform 优化渲染速度
*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.5s;
width: 100%;
position: absolute;
z-index: 99;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
</style>
注意需要:在路由信息里面配置相关配置
例如:
import {
createRouter,
createWebHashHistory
} from 'vue-router'
import Home from '../views/Home.vue'
const routes = [{
path: '/',
name: 'Home',
component: Home,
meta: {
keepAlive: true,
level: 1,
transitionName: ""
}
},
{
path: '/detail',
name: 'Detail',
component: () => import('../views/detail.vue'),
meta: {
keepAlive: true,
level: 2,
transitionName: ""
}
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router