vue 控制手机原生返回按钮

在H5项目中，需要控制手机返回按钮，在网上找了很多资料，发现用的最多的是：
“history popstate” 实现，经过观察，发现和beforeRouterLeave方法 效果是一样的。
history popstate 方式：

//挂载完成后，判断浏览器是否支持popstate
mounted(){
     if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.cancel, false);
  }
  },
//页面销毁时，取消监听。否则其他vue路由页面也会被监听
 destroyed(){
  window.removeEventListener('popstate', this.cancel, false);
  }
//具体的处理方式
 cancel: function() {
      if(this.orderId){
          this.$router.push({
            name:"orderList",
            params: {id:this.orderId},
                });
      }else{
      this.$router.go(-1);
      }
    },

这种方式，主要控制当用户点击返回按钮时，该做如何处理，针对不同的路由 和需要返回的路由 需要自己做判断。
这种方式和beforeRouteLeave其实是一样的都是在用户点击返回按钮时，做处理，不管哪种方式都需要自己针对不同的路由写具体的逻辑，真是有点麻烦啊！！！
我最终选择利用router中的 beforeRouteLeave 结合router中push replace go 实现。
首先需要了解 vue-router中路由转换的方式，可参考vue-router官网。
vue-route路由转换 一般 通过以下3种方式：

router.push()   //转换路由 会向history中增加路由
router.replace()  //替换当前路由 此时history中当前路由是被替换后的路由
router.go(n)       //在 history 记录中向前或者后退多少步，类似window.history.go(n)。

主要思想就是针对不同路由自己做逻辑处理：
贴段代码：
需求是：从列表页和首页都能跳转详情页，详情页跳转写评论页，从写评论跳转到详情页，需要携带该详情的数据。所以需要将数据传到detail中

 beforeRouteLeave(to, from, next) {
    if (to.name === 'detail') {
      to.query.items = this.list
    }
    next()
    // next({path: '/detail'})
  },

想要判断从哪个路由跳转进来，可以在from页面添加标识符，然后在该页面使用 watch监听数据，

//from页面
 goDetail() {
      this.$router.replace({
        path: '/detail',
        query: {
          items: this.list,
          isFromComment: true
        }
      })
    },
//to页面
watch: {
  $route: {
      handler: function(route) {    
        // 从写评论页返回
        if (route.query.isFromComment) {
          this.isFromComment = true
        }
      },
      immediate: true // 立即执行，而不是等到有变化时才执行
    }

 }

然后自己再处理逻辑，整体思路是以上这样，具体的逻辑跟需求相关。
以上是我一个人的见解，如果有错误的地方，希望大家指出！