1, router.js配置 每个路由的index值 2, router.js配置 每个路由的keepAlive值
app.vue 代码
<template> <div id="app"> <transition :name="transition"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> </transition> <transition :name="transition"> <router-view v-if="!$route.meta.keepAlive"></router-view> </transition> </div> </template> <style> @import url("../static/css/reset.css"); @import url("../static/css/transition.css"); </style> <script> export default { name: "App", data() { return { transition: "" }; }, watch: { $route(to, from) { if (to.meta.index > from.meta.index) { this.transition = "slide-left"; } else { this.transition = "slide-right"; } } }, } </script>transition.css代码
.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all 500ms; position: absolute; width:100%; height:100%; } .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); }转载于:https://www.cnblogs.com/xielisen/p/9492206.html
