使用eventBus.$on事件重複執行問題

一：問題

在寫移動賬戶註冊的時候有一個驗證會從註冊頁面A跳轉到另一個B去驗證，驗證完之後拿到驗證碼再次回到頁面A並且傳回拿到的結果再請求接口，結果跳回A的時候發現接口第一次請求一次，第二次求情兩次，以此類推

二：原因

只要頁面沒有強制刷新，存在組件切換，eventBus.$on方法會被多次綁定，造成事件多次觸發，這個跟vue壽命週期有關，eventBus.$on方法需要手動清除

三：解決方案

在B頁面生命週期結束（beforeDestroy）的時候關閉提交

  beforeDestroy() {
    eventBus.$off("FINDPASS");
  }

四：具體代碼如下：

A頁面接收

  mounted() {
    eventBus.$on("FINDPASS", data => {
      console.log("FINDPASS");
      let _params = {
        mobile: this.reginformation.mobile
      };
      sendOther(_params).then(response => {
        this.start1 = true;
        this.$store.commit("SET_INFORMATION", {
          mes: "已發送",
          icon: "success"
        });
      });
    });
  },

 B頁面發出以及銷燬

  methods: {
    GeetPath(val) {
        eventBus.$emit("FINDPASS", val);
        this.$router.push("/forgetPass");
    }
  },
  beforeDestroy() {
    eventBus.$off("FINDPASS");
  }