vue-router实现webApp页面切换效果

对于给app页面切换时添加过渡效果，vue-router的官方文档中也有案例（https://router.vuejs.org/zh-cn/advanced/transitions.html）。此例是结合app实际的页面跳转情况，在官方案例的基础上做的补充和调整。相关文件如下：

index.html

main.js

new Vue({
  router,
  components: { App }
}).$mount('#app')

router配置

要实现页面前进后台动画，首先必须知道页面状态（即是页面是进入下一页，还是后退），我们可以通过改写router.go方法记录回退状态，页面如果需要回退时，调用this.$router.go(-1)，改写代码如下：

Router.prototype.go = function () {
  this.isBack = true
  window.history.go(-1)
}

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import App from '../App'
const Home = r => require.ensure([], () => r(require('../page/Home')), 'Home')
Vue.use(Router)
// 增强原方法：isBack作为标识来记录前进后退
Router.prototype.go = function () {
  this.isBack = true
  window.history.go(-1)
}
let routes = [
  {
    path: '/',
    component: App,
    children: [
      {
        path: '',
        redirect: '/home'
      },
      {
        path: '/home',
        name: 'home',
        component: Home
      }
    ]
  }
]
export default new Router({
  mode: 'history',
  routes: routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop
      }
      return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }
})

App.vue

html代码

js代码

export default {
  data () {
    return {
      transitionName: 'slide-left'
    }
  },
  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()
  }
}

css代码

.child-view {
   position: absolute;
   width:100%;
   transition: all .4s 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);
}

！！！！还没有结束！！！！

页面跳转时回退除了this.$router.go(-1)以外，还可以通过this.$router.replace('上一个页面的路由地址')的方式返回前一个页面，那接下来要怎么操作呢？改写router.go方法已经不够用啦，那就看下去咯

需求场景：A页面进入B页面，B页面点击完成以后返回前一页，并且B页面需要传参给A页面，B页面点击完成的代码如下：

rightClick () {
  this.$router.replace({
    path: '/A', 
    query: {name: '传了个name'}
  })
}

那么，在离开B页面之前，需要在B页面通过beforeRouteLeave来监听路由变化：

beforeRouteLeave (to, from, next) {
    // 告诉路由要使用回退动画
   this.$router.isBack = true
   next()
}

YOYO，到这里，就全部都OK啦！