为了增加用户体验，在切换路由时可加动态的过渡效果。
应用场景：
image.png
切换如上页面的底部导航栏，添加 动画过渡效果。
1、样式
/*路由切换 animation start */
.slide-left-enter-active,
.slide-left-leave-active {
transition: 0.3s transform ease;
backface-visibility: hidden;
perspective: 1000;
}
.slide-left-enter {
transform: translate3d(-100%, 0, 0);
}
.slide-left-enter-to,
.slide-left-leave {
transform: translate3d(0%, 0, 0);
}
.slide-left-leave-to {
transform: translate3d(100%, 0, 0);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: 0.3s all ease-out;
backface-visibility: hidden;
perspective: 1000;
}
.slide-right-enter {
transform: translate3d(100%, 0, 0);
}
.slide-right-enter-to,
.slide-right-leave {
transform: translate3d(0, 0, 0);
}
.slide-right-leave-to {
transform: translate3d(-100%, 0, 0);
}
/*路由切换 animation end */
2、路由配置
路由配置时，给路由对象加上meta属性，并在meta中加index属性和值，后端监听需要需要用该值来判断
routes: [{
path: '/',//重定向
redirect: '/home',
meta: {
index:1
}
}, {
// 首页
name: 'home',
path: '/home',
meta: {
index:2
},
component: Home,
}, {
// 分类
name: 'classify',
path: '/classify',
meta: {
index:3
},
component: Classify
}, {
// 我的
name: 'mine',
path: '/mine',
meta: {
index:4
},
component: Mine
},{
// 吃饭吧
name:'eat',
path:'/eat',
meta: {
index:7
},
component:Eat
},{
// 购物车
name:'cart',
path:'/cart',
component:Cart,
meta: { requiresAuth: true,index:10 }
}]
3、在App.vue中添加动态指令并监听路由
（1）给路由添加动态指令 ，并给个名字
（2）监听路由
根据路由对象的index值来进行比较，给当前路由页面动态指令添加对应的类名
watch:{
$route(to,from){
console.log(to,77);
console.log(from,88);
const fromIndex=from.meta.index
const toIndex=to.meta.index
if (toIndex > fromIndex) {
this.transitionName = 'slide-right'
} else if (toIndex < fromIndex) {
this.transitionName = 'slide-left'
} else {
this.transitionName = ''
}
}
}