template:
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="Router" />
</transition>
</div>
</template>
scripit 监听路由
export default {
name: 'App',
data() {
return {
transitionName: '' // 默认动态路由变化为slide-right
}
},
mounted() {
},
watch: {
$route(to, from) {
// console.log("去"+to.meta.index)
// console.log("来"+from.meta.index)
if(from.meta.index == undefined){
from.meta.index ='0'
}
// let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
if(to.meta.index > from.meta.index) {
this.transitionName = 'slide-left'
} else {
this.transitionName = 'slide-right'
}
}
}
}
css 动画效果
.Router {
position: absolute;
width: 100%;
transition: all .5s ease;
top:0;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}
router index 给路由定义一个级别 meta:{index:0}, index由小到大 由低到高
```
export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: Nav,
meta:{index:0},
},
{
path:"/city",
component:Ty,
meta:{index:1},
},
{
path:"/zg",
component:Zhaogong,
meta:{index:2},
},
{
path:"/zgtype",
component:Zgtype,
meta:{index:3},
},
{
path:"/jobdetile",
component:Jobdetile,
meta:{index:4},
}
]
})