问题描述
通常情况下，我们实现不同页面 transition 效果可以直接 watch， 如下：
watch: {
'$route' (to, from){
//在这里可以根据to和from来更改transitionName
//从而实现不同页面切换效果，例如：
let fromDepth = from.meta.depth, toDepth = to.meta.depth;
transitionName = fromDepth < toDepth ? 'slide-right' : 'slide-left';
}
}
也可以通过这种方法判断是否是页面前进还是后退，比如现在有两个页面 A 和 B，那么 A => B 便是前进，B => A 便是后退。
但是当页面逻辑复杂后这种方法就不好用了，比如 A <=> B <=> A，当页面在 B 时，前进和后退都是 from B to A，便无法分辨是不是 Go Back。
解决尝试 - 1
这时能够想到一个传统方法，即 popstate
window.onpopstate = function(){
isGoBack = true;
}
但是测试后 onpopstate 调用在 watch 监听之后
isGoBack = false;
window.onpopstate = function(){
isGoBack = true;
console.log('I am PopState');
}
watch: {
'$route' (to, from){
console.log('I am Watcher');
if(isGoBack)
//playGoBackTransition
}
}
结果：
I am Watcher
I am PopState
解决尝试 - 2
还有一个办法便是自定义返回按钮
<button @click='goBack'></button>
methods: {
goBack: function(){
isGoBack = true
this.$router.go(-1);
}
}
这样只要用户点击我们的自定义按钮便可以实现，但是如果点击浏览器自带的返回键，便失效了
最终尝试 - 3
在尝试 1 上做了些更改
isGoBack = false;
window.onpopstate = function(){
console.log('I am PopState');
isGoBack = true;
}
router.beforeEach(function(to, from, next){
setTimeout(()=>{ next() },5) //5毫秒后才给页面放行
}
watch: {
'$route' (to, from){
console.log('I am Watcher');
if(isGoBack)
//playGoBackTransition
}
}
结果：
I am PopState
I am Watcher
虽然是笨办法，但总算是实现了功能
其他可能
- 查阅了一些资料，如果是 router 用 history 模式，可以在 scrollBehavior 里面操作，但我试了很多方法都不行
- 看网上有用 F7 框架实现的，由于我不用 F7 所以没试这种方法
如果各位有更好的方案，还请指教
