原生侧滑、H5自定义侧滑、系统后退、H5自定义后退 四者冲突如何

现阶段，基本上手机浏览器上都实现了侧滑返回或前进功能。当我们用上了vue的动画效果时，便意味着存在一个BUG，那就是原生侧滑、H5自定义侧滑、系统后退、H5自定义后退四者皆能实现后退功能，导致了IOS原生侧滑返回动画效果重复执行BUG。

解决方法：对系统返回做特殊处理

• 原生侧滑、H5自定义侧滑、系统后退、H5自定义后退四种方式可简单划分成两种，原生侧滑 和 系统后退键后退 可划分成系统后退，其原理基于历史栈。H5自定义开发的侧滑返回 和 H5自定义后退 可划分成项目内部返回，不一定遵循历史栈。
• 本方法基于本人的项目方法封装$pageBack，具体可参考(https://www.jianshu.com/p/dc23829ec9f3)(这也是本人比较喜欢封装的方法的原因，对于框架使用频率高的方法进行进一步封装，有利于后期进行一些统一化改造及测试)

1. H5自定义开发的侧滑返回 和 H5自定义后退 共用一个方法 (如果项目中不存在H5自定义右滑返回功能请忽略该点)

• 在页面开发时，退后方法用同一个名称命名，如goBack

methods: {
    goBack() {
        this.$pageBack(); // 重定义方法
    }
}

• 在入口文件中把每个页面中的goBack方法暴露出来

Vue.mixin({
  activated() {
    if(typeof(this.goBack) == 'function') {
      window._currentPageBack = this.goBack;
    } else {
      window._currentPageBack = null;
    }
  }
})

• 在app.vue中增加右滑功能（这里我使用了vue-directive-touch插件）

<div id="app" v-touch:right="onSwipeRight">
</div>

onSwipeRight(event, start, end) {
  if((end.X - start.X) > 100) {
    if(typeof(window._currentPageBack) == 'function') {
      window._currentPageBack();
    }
  }
}

2.区分系统返回和项目自定义返回

• 凡是调用了$pageBack方法，均通过一个状态isOperateBack来监控

在$pageBack中增加   
store.commit('CHANGE_STATE', {isOperateBack: true});

3.在测试中发现，微信浏览器右滑直接退出应用，但如百度浏览器等却是返回上一页，故需要区别对待

• 由于页面路由切换都是通过操作history的，故可通过监听popstate来统一处理

在app.vue中
data() {
    return {
        isSystemBack :  false
    }
},
mounted(){
  let $this = this;
  //处理原生右边侧滑返回和系统返回键返回的动画效果BUG
  window.addEventListener("popstate", function(){
    if($this.isOperateBack) {
      this.isSystemBack = false;
    } else if($this.$config.iBrowser.weixin) {
      // 微信浏览器打开的
      $this.isSystemBack = false;
    } else if($this.$config.iBrowser.pc) {
      // PC浏览器打开的系统后退
      $this.isSystemBack = false;
    } else {
      // 非微信浏览器打开的系统后退
      $this.isSystemBack = true;
    }
  }, false);
}
//  监听路由变化
$route(to, from) {
    to = to || {};
    // 需要判断是否为系统后退，如果是，不执行动画效果
    this.CHANGE_STATE({isOperateBack: false});
    if(this.isSystemBack) {
      this.transitionName = '';
    } else {
      if (to.name == 'index') {
          this.transitionName = 'fade'
      } else {
          this.transitionName = 'pop-' + (this.direction === 'forward' ? 'in' : 'out');
      }
    }
    this.isSystemBack = false;
}

结语： 本来想对原生侧滑返回和系统返回做区别的，却发现，原生侧滑返回过程touchend不一定会触发，很难做区别，容易出BUG，故只能改成目前并不完美的方案，毕竟非微信浏览器的系统返回的动画效果统一取消了。