vue路由切换的动画

原理：在定义路由时添加meta属性，定义index，然后在页面监听路由，根据index的大小决定添加哪种动画，

具体：

{
    path: '/',
    name:'home',
    component: Home,
    meta: {
      index: 1
    },
},
{
   path: '/search',
  name: 'search',
  component: Search,
  meta: {
    index: 2
  },

},

 使用

 默认动画

    data () {
        return{
            transitionName: 'slide-left'
           
        }
    },

监听路由

watch: {
    $route(to, from) {
        // console.log(to.meta.index,from.meta.index)
        if (to.meta.index > from.meta.index) {
            this.transitionName = "slide-left";
        } else {
            this.transitionName = "slide-right";
        }
    }
}，

定义路由动画