VueRouter监听Go Back事件并结合transition动画

问题描述

通常情况下，我们实现不同页面 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 所以没试这种方法

如果各位有更好的方案，还请指教