VUE-从添加界面返回原页面时，新增数据自动刷新，使用监听路由来实现监听缓存数据

• 功能简介：

1、主页面路径 mainpage、添加界面路径addpage 

2、默认显示全部tab，只有一个添加按钮

3、点击添加按钮，跳转到添加界面，添加新数据后，返回原界面，新添加的数据即时显示出来

• 关键点：

1、利用缓存存储新添加数据的创建时间、专家类型

2、当路由变化时，判断缓存数据是否变化，变化则触发下拉刷新事件；否则，不进行任何操作

• 实现步骤：

1、在添加界面，点击提交按钮时，存储添加数据的创建时间、专家类型

    /** 提交 */
    doSubmit(){
      //判断数据是否为空
      ......

      axios({
        //后端接口
        ......

      }).then((res)=>{
        let _this = this;
        if(res.data.result===1){
          // 时间、专家类型组成一个新对象，存在session中
          let newdata = { id: Date.now(), havedatatype:_this.formData.haveEvent }
          sessionStorage.setItem("havedatatype", JSON.stringify(newdata));
          showAlert("添加成功！","提示",function(){
            _this.$router.go(-1);//返回原界面
          });
        }else{
          Toast("添加失败");
        }
      }).catch(err =>{
        Toast('未获取到接口数据！');
      })
    },

2、mainpage界面使用hasAddFlag存储缓存数据

data() {
  return {
    hasAddFlag:{}//记录缓存数据
  }
}

3、监听路由变化

watch: {
      // 监听,当路由从添加界面返回到全部界面时，获取缓存中的数据
      $route: {
        handler: function(val, oldVal){
          if(val.name==="mainpage"&&oldVal.name==="addpage"){
            this.hasAddFlag=JSON.parse(sessionStorage.getItem("havedatatype")||'{}')
          }
        },
      },
},

4、监听缓存数据变化

 //监听缓存数据变化,如果新值和旧值一致，则不做处理；否则表示有新添加的数据，界面及时刷新
      hasAddFlag(newVal,oldVal){
        if(newVal.id===oldVal.id &&　newVal.havedatatype===oldVal.havedatatype ){
          return
        }
        // 不管新添加的是专家还是普通人员，全部tab下数据均刷新；而专家tab只有新增专家才刷新
        this.pullingDown();
        if(newVal.havedatatype===1){//专家
          this.pullingDown2();
        }
      }