页面切换效果，前进时页面从左向右移入，后退

vue-router实现webApp切换效果

# 安装依赖 npm install # 浏览器打开localhost:8080 npm run dev 方案实现 记录页面前进后退的状态

要实现页面前进后台动画，首先必须知道页面状态（即是页面是进入下一页，还是后退），我们可以通过封装router.back方法记录回退状态，页面如果需要回退时，调用

$router.goback() 修改router/index.vue

// 增强原方法，好处是旧的业务模块不需要任何变动 Router.prototype.goback = function () { store.commit('changeIsBack', true) this.back(-1) } 设置vuex的数据

const state = { isBack: false //flag } const mutations = { changeIsBack (state, flag) { state.isBack = flag // 改变flag } } export default { state, mutations } 监听路由变化

使用嵌套路由的方式引入子页面，监听根路由的update钩子做相应操作。

beforeRouteUpdate (to, from, next) { // 如果isBack为true时，证明是用户点击了回退，执行slide-right动画 let isBack = this.$store.state.routerState.isBack if (isBack) { this.transitionName = 'enter-right' } else { this.transitionName = 'enter-left' } // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退 this.$router.isBack = false next() } 动画效果

通过transition执行动画

<transition :name="transitionName"> <router-view></router-view> </transition>

css代码

.enter-view { position: absolute; width:100%; transition: all 0.2s linear; } .enter-left-enter, .enter-right-leave-active { transform: translateX(100%); } .enter-left-leave-active, .enter-right-enter { transform: translateX(-100%); }