弃用
经历不同的场景实测后发现无法达到完美识别,以下未原始文章,可做参考
方法思路
- 每次跳转的时候,给路由全局添加一个时间戳参数
- 监听路由变动,根据to和from的时间戳判断是前进还是后退
全局添加时间戳参数
router.beforeEach((to, from, next) => {
if (typeof to.query._t !== "undefined") {
next();
} else {
to.query._t = new Date().getTime().toString();
next(to);
}
});
App.vue监听路由变动
transitionName属性定义
data: function () {
return {
transitionName: ''
};
}
绑定transitionName
<transition :name="transitionName">
<router-view ></router-view>
</transition>
监听$route
watch: {
//使用watch 监听$router的变化
$route(to, from) {
if (parseInt(to.query._t) < parseInt(from.query._t)) {
this.transitionName = 'slide-right';
} else {
this.transitionName = 'slide-left';
}
}
}
css
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all .3s;
position: absolute;
width: 100%;
left: 0;
}
.slide-right-enter {
transform: translateX(-100%);
}
.slide-right-leave-active {
transform: translateX(100%);
}
.slide-left-enter {
transform: translateX(100%);
}
.slide-left-leave-active {
transform: translateX(-100%);
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。