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,
      },
    
    },

你可能感兴趣的:(vue,transition,vue-router)