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

问题描述

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

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

相关代码

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

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

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
阅读 2.6k
3 个回答

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

这不就是让用户在离开当前页的时候,给用户做个警告提醒吗?
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守卫函数。
判断当前路由是否需要警告提醒,如果需要,则弹出提示框,并根据用户的选择来进行下一步操作。如果不需要,则直接进行下一步操作。

  • 用户强制刷新页面时可以使用如下的方式提示:
window.onbeforeunload = function() {
            return true;
   }
  • 其他情况可以使用 vue-router 中的 beforeRouterLeave 导航守卫进行提示
本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题