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

總結

以上是生活随笔為你收集整理的vue App.vue router 过渡效果, keep-alive 结合使用示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。