Vue监听返回键关闭弹出层不返回页面

时间:2022-07-24
本文章向大家介绍Vue监听返回键关闭弹出层不返回页面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
//监听页面销毁之前
 beforeDestroy() {
    window.removeEventListener(
      "popstate",
      () => {
        if (this.showPop) {
          this.showPop = false;
        } else {
          this.$router.go(-1);
        }
      },
      false
    );
  },
  //使用了keep-alive进行页面缓存
  //可以写在mounted函数里
  activated() {
    window.addEventListener(
      "popstate",
      () => {
        if (this.showPop) {
          this.showPop = false;
        }
      },
      false
    );
  },
  
  //打开弹窗
   getPop() {
      this.showPop = true;
      window.history.pushState(null, null, "#");
    },