【易错求解】如何禁止用户返回上一页？可以支持PC+M吗？

Question

问题描述

避免用户直接离开当前页面，导致输入的信息丢失

问题出现的环境背景及自己尝试过哪些方法

相关代码

无

你期待的结果是什么？实际看到的错误信息又是什么？

阻止用户离开，并且需要提醒用户。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

x色网站常用的一种办法，直接循环调用几百次 history.pushState，给你的 History Stack 加个几百条记录，不管你怎么返回都回不去。

Answer 2

这不就是让用户在离开当前页的时候，给用户做个警告提醒吗？
vue-router里不是有路由守卫吗？

代码如下：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        needWarning: true, // 添加元数据，表示需要警告提醒
      },
      beforeRouteLeave: (to, from, next) => {
        // 在离开路由时触发的函数
        const needWarning = to.meta.needWarning; // 获取当前路由的元数据

        if (needWarning) {
          const answer = window.confirm('确定要离开当前页面吗？'); // 弹出提示框
          if (answer) {
            next();
          } else {
            next(false);
          }
        } else {
          next();
        }
      },
    },
    // 其他路由配置...
  ],
});

为需要添加离开提醒功能的路由设置beforeRouteLeave守卫函数。
判断当前路由是否需要警告提醒，如果需要，则弹出提示框，并根据用户的选择来进行下一步操作。如果不需要，则直接进行下一步操作。

Answer 3

• 用户强制刷新页面时可以使用如下的方式提示：

window.onbeforeunload = function() {
            return true;
   }

• 其他情况可以使用 vue-router 中的 beforeRouterLeave 导航守卫进行提示

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。