vue 控制浏览器回退，防止返回，屏蔽返回

哆比哆比

已于 2024-05-22 20:47:58 修改

阅读量638

点赞数

文章标签： vue.js javascript 前端

于 2023-05-15 10:37:16 首次发布

本文链接：https://blog.csdn.net/wmw_wmw/article/details/130679438

版权

// 打开组件
const openPdf = () => {
  if (window.history && window.history.pushState) {
    // 向历史记录中插入了当前页
    history.pushState(null, null, location.href);
    window.addEventListener(
      'popstate',
      function () {
        if (show.value) { // 组件开启的时候点了返回才拦截
          show.value = false;
          window.removeEventListener('popstate', function () {}, false);
        }
      },
      false
    );
  }
  show.value = true;
  };
const sign = () => {
  // show.value = false; // 关闭组件换成回退上一页，不然会导致路由历史多一条，返回要点两次才出去
  router.go(-1);
};
// 离开销毁
onBeforeUnmount(() => {
  window.removeEventListener('popstate', null, false);
});