Vue 实现页面的切换动画

在router文件夹中的index.js中添加

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

在app.vue中添加

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'App',
    data() {
      return {
        transitionName: ''  // 默认动态路由变化为slide-right
      }
    },
    watch: {
      '$route' (to, from) {
        let isBack = this.$router.isBack  //  监听路由变化时的状态为前进还是后退
        if(isBack) { // 如果是返回，则左侧滑到右边去「滑入右边」，否则打开界面从右边滑到左边去
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
        this.$router.isBack = false
      }
    },
  }
</script>

<style>
  .Router {
    position: absolute;
    width: 100%;
    transition: all .8s ease;
  }

  .slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    /*-ms-transform: translate(100%, 0);*/
    transform: translate(100%, 0);
  }

  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
  }
</style>

在components文件夹的组件中使用

<template>
    <div>
        <div class="head">
            <img src="../assets/home/backtrack-icon.png" width="7%" @click="go()">
        </div>
    </div>
</template>

<script>
    export default {
        name: "invitation",
        methods: {
            go() {
                this.$router.goBack()
            }
        }
    }
</script>

<style scoped>
    @import "./css/invitation.css";
</style>