<template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view v-if="$route.meta.keepAlive"/> </keep-alive> </transition> <transition :name="transitionName"> <router-view v-if="!$route.meta.keepAlive"/> </transition> </div> </template> <script> export default { data () { return { pathList: [], transitionName: 'slide-left', } }, watch: { // 监听路由变化 $route (to, from) { if (this.pathList.includes(to.path)) { const index = (this.pathList.findIndex(() => { return from.path })) this.pathList.splice(index, 1) this.$router.isBack = true } else { this.pathList.push(to.path) this.$router.isBack = false } if (to.path === '/tab/home-page') { this.$router.isBack = true this.pathList = [] } // let isBack = this.$router.isBack this.transitionName = 'router-slide-right' this.$router.isBack = false }, }, methods: { onSwipeLeft () { this.$router.go(-1) }, }, } </script> <style lang="less"> @import "styles/variables"; @import "styles/public-style"; html, body, #app { height: 100%; width: 100%; overflow-x: hidden; //overflow: auto; //-webkit-overflow-scrolling: touch; //overflow-scrolling: touch; } </style>