Vue路由切换动画效果，(从右往左进入，从左往右退出，前一个页面不为空白)

效果就是，例如跳转详情页，详情页页面从右往左进入,当我们点击返回主页时候，详情页从左往右退出，并且这个过程中，主页的内容不为空白

首先创建三个vue文件

home.vue为父组件
childrenOne.vue为子组件
childrenTwo.vue为子组件

router.js中

 const routes=[
   
    {
      path: '',
      redirect:'/home',
    },
    {
      path : '/home',
      component:Home,
      children:[
        {
          path:'',
          redirect:'childrenone'
        },
        {
         path:'childrenone',
         component:()=>import(),
        },
        {
          path:'childrentwo',
          components:{
            childrenone:()=>import(),
            childrentwo : ()=>import()
          }
        }
      ]
    },    
  ]

然后在home.vue中

 <keep-alive>
     <router-view></router-view>
  </keep-alive>
<keep-alive>
  <router-view name="childrenone"></router-view>
   </keep-alive>
   <keep-alive>
  <router-view name="childrentwo"></router-view>
   </keep-alive>
   
  <style>
	#app{
	  position: relative;
	}

在childrenOne中

<template>
  <div>
  <p  @click="go">跳转</p>
  </div>
</template>

<script>
export default {
    methods: {
     go(){
     this.$router.push('/home/childrenTwo')
   }
  },
}
</script>

childrenTwo中

<template>
  <div class="login slide-left-active" :class="[isShow?'slide-left-active':'slide-right-active']">
    <p @click="goback()">返回</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:true
    }
  },
  methods: {
    goback(){
      this.isShow = false
      setTimeout(()=>{
       this.$router.back()
      },900)
     
    }
  },
  deactivated() {
    this.isShow = true
  },
}
</script>

<style scoped>
   .login{
    position:absolute;
    left:0;
    top:0;
    z-index:100;
    width:100%;
    min-height:100%
    }
    .slide-left-active{
      animation: 1s slideLeftActive;
    }
    @keyframes slideLeftActive{
      0%{
        transform: translateX(100%);
      }
      100%{
        transform: translateX(0);
      }
    }
    .slide-right-active{
      animation: 1s slideRightActive;
    }
     @keyframes slideRightActive{
      0%{
        transform: translateX(0);
      }
      100%{
        transform: translateX(100%);
      }
    }
</style>

说明一下，我采用的是定位布局，让子组件覆盖在父组件上面，router-view添加name是因为通过name属性，为一个页面中不同的router-view渲染不同的组件

当然路由动画切换也有简便的方法

在APP.VUE中

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

watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }

<style lang="scss" scoped>
.view {
  width: 100%;
  position: absolute;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>

然后我们在router.js中这样设置一个index

 {
      path: '',
      redirect:'/home',
      meta: {
        index: 9,
      },
    
    },