路由控制以及css

app.vue

<template>
  <div class="cpq-ui">
    <transition :name="'cpq-router-' + routerDirection" :css="!!routerDirection">
      <router-view class="cpq-router-view"></router-view>
    </transition>
  </div>
</template>

<script>
import router from './router'
import Vue from 'vue'
import store from '@/store'
export default {
  name: 'cpq-ui',
  beforeCreate () {
    this.$options.router = router
    this._routerRoot = this
    this._router = this.$options.router
    this._router.init(this)
    Vue.util.defineReactive(this, '_route', this._router.history.current)
  },
  computed: {
    routerDirection () {
      return store.routerDirection
    }
  }
}
</script>

<style scoped>
  .cpq-ui {
    height: 100%;
  }
  .cpq-router-out-enter-active,
  .cpq-router-out-leave-active,
  .cpq-router-in-enter-active,
  .cpq-router-in-leave-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    will-change: transform;
    transition: all 400ms;
  }
  .cpq-router-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .cpq-router-out-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .cpq-router-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .cpq-router-in-leave-to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>