tab重复点击，数据重复问题 vue

做项目的时候经常会遇到这样的一个功能，头部有一个tab，点击每个tab 的时候会显示对应的内容，但是当网络不好，或者是疯狂点击的时候，每个tab的内容很有可能会造成重叠或者内容重复。以下有2种解决方案

方案1：
每次点击一个tab的时候， 整个页面出现一个菊花和一个遮罩，不能做其他操作，直到数据请求结束（你也可以做一个超时时间）这时候，就不出出现以上情况，但是，用户体验不太好。

方案2 使用 abort（）方法
在第2个请求来的时候，把前一个请求取消。我用的是vue-resource，请看代码
{
  // GET /someUrl
  this.$http.get('/someUrl', {

    // use before callback
    before(request) {

      // abort previous request, if exists
      if (this.previousRequest) {
        this.previousRequest.abort();
      }

      // set previous request on Vue instance
      this.previousRequest = request;
    }

  }).then(response => {
    // success callback
  }, response => {
    // error callback
  });
}