vue 手机端左右滑动效果

app.vue

<template>
 <div id="app">
   <transition :name="transitionName" >
       <router-view class="app_views"></router-view>
   </transition>
 </div>
</template>
<script>
export default {
 computed: {
   transitionName () {
     return this.$store.state.transitionName
   }

 }
};
</script>
<style>
.app_views {
 position: absolute;width: 100%;transition: all .8s ease; top: 0;
}
.slide-left-enter-active, .slide-right-leave-active {
 transition: transform 0.3s;
}
.slide-left-enter, .slide-right-leave-to {
 transform: translateX(100%);
}
.slide-left-leave-active, .slide-right-enter-active {
 transition: transform 0.3s;
}
.slide-left-leave-to, .slide-right-enter {
 transform: translateX(-100%);
}
</style>

vuex 实时更新页面是前进还是后退

var state = {
  routeStack: [], // 存储路由栈
  transitionName:[],// 页面切换方向：slide-left左滑前进，slide-  right右滑后退
}
const mutations = {
  //更新前进还是后退
  changeTransition: (state, transitionName)=> {
    state.transitionName = transitionName
  },
//记录当前路由  用于全局判断是前进还是后退
  updateRouteStack(state, route){ // 更新路由
    setTimeout(()=>{
      if(state.routeStack.indexOf(route) == -1){
        state.routeStack.push(route)
      }
    })
  },
}

全局的router.beforeEach 进行拦截计算是前进还是后台

router.beforeEach(async(to, from, next) => {
  let passport = localStorage.getItem('token')

    let len = store.state.routeStack  //获取全局存的路由记录

      if(len.indexOf(to.path) == -1){ // 前进,想左滑动 
        store.commit('updateRouteStack', to.path)
        store.commit('changeTransition', 'slide-left')
      }else if(len.indexOf(to.path) != -1 ){// 后退,想右滑动
        store.commit('delRouteStack', to.path)
        store.commit('changeTransition', 'slide-right')
      } else {// 同一层级,无动画
        store.commit('updateRouteStack', to.path)
        store.commit('changeTransition', 'none')
      }
    next()
})