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中

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

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

在APP.VUE中

 
       
      
      
    

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

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

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