Vue3相对于Vue2布局稍微有点不同,话不多说直接上代码
App.vue
<template>
<div>
<!-- vue3.0配置 -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transitionName">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</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>
router/index.js
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: ""
}
},
{
path: '/city',
name: 'City',
component: () => import('../views/City.vue'),
meta: {
keepAlive: true,
level: 0,
transitionName: ""
}
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。