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

哆比哆比

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

阅读量874

点赞数

文章标签： vue.js javascript 前端

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

本文链接：https://blog.youkuaiyun.com/WMW_wmw/article/details/130679438

版权

该文讨论了一个JavaScript函数，用于在打开组件时管理浏览器的历史记录。通过使用`pushState`和监听`popstate`事件，它确保在用户点击返回时能关闭组件并清理历史。同时，文章包含了离开页面时的清理逻辑，移除事件监听器，以及使用路由`go(-1)`进行页面回退。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 打开组件
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);
});