Vue阻止頁面刷新，右鍵，后退

methods

stopF5Refresh() {
      document.onkeydown = function (e) {
        var evt = window.event || e;
        var code = evt.keyCode || evt.which;
        //屏蔽F1---F12
        if (code > 111 && code < 124) {
          if (evt.preventDefault) {
            evt.preventDefault();
          } else {
            evt.keyCode = 0;
            evt.returnValue = false;
          }
        }
      };
      //禁止鼠標右鍵菜單
      document.oncontextmenu = function () {
        return false;
      };
      //阻止后退的所有動作，包括 鍵盤、鼠標手勢等產生的后退動作。
      history.pushState(null, null, window.location.href);
      window.addEventListener("popstate", function () {
        history.pushState(null, null, window.location.href);
      });
    },

created

async created() {
    this.stopF5Refresh();
  },

監聽頁面刷新

async mounted() {
    window.addEventListener("beforeunload", (e) => {
      this.beforeunloadHandler(e);
    });
  },
destroyed() {
    window.removeEventListener("beforeunload", (e) => {
      this.beforeunloadHandler(e);
    });
  },

methods

beforeunloadHandler(e) {
      e = e || window.event;
      if (e) {
        e.returnValue = "您是否確認離開此頁面-您輸入的數據可能不會被保存";
      }
      return "您是否確認離開此頁面-您輸入的數據可能不會被保存";
    },