vue-router实现webApp切换页面动画效果代码

Router.prototype.goBack = function () { this.isBack = true window.history.go(-1)}const router = new Router({ routes: [  {   path: '/',   name: 'PageTransition',    component: PageTransition, // 引入页面切换组件   children: [{    path: '',    component: Index // 父路由访问页面，例如，访问www.aaa.com/ 显示的是Index组件   }, {    path: '/pageA',    component: PageA // 子路由组件 例如，访问www.aaa.com/pageA 显示为PageA   }, {    path: '/pageB',    component: PageB // 子路由组件 例如，访问www.aaa.com/pageB 显示为PageB   }]  } ]})

$router.go(-1) 

// 增强原方法，好处是旧的业务模块不需要任何变动Router.prototype.go = function () { this.isBack = true window.history.go(-1)}// 或者你可以新建一个方法Router.prototype.goBack = function () { this.isBack = true this.go(-1)}

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

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

.child-view { position: absolute; width:100%; transition: all .8s cubic-bezier(.55,0,.1,1);}.slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0);}.slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0);}

const router = new Router({ routes: [  {   path: '/',   name: 'PageTransition',   component: PageTransition,   children: [{    // 该路由为父路由的默认路由    path: '',    component: Index   }, {    path: '/pageA',    component: PageA   }, {    path: '/pageB',    component: PageB   }]  } ]})