即将离开网站时禁用自己的后退按钮? 不是浏览器实现的

问题描述

所以我实现了一个类似于浏览器后退按钮的后退按钮。但我希望它是一个禁用的按钮,如果下一次点击会离开网站(请注意浏览器按钮的 idc)。有什么方法可以检查进一步返回是否会离开网站或至少警告用户他们将要离开? 现在我有这个,我正在使用 Vue.js:

<div @click="goBack"></div>

    goBack: function () {
      this.$router.go(-1)
    }

解决方法

您可以使用 window.history.length 来跟踪历史堆栈是否仍有项目(长度 > 0)。但是,这种方法仅在用户从新选项卡/窗口重新开始时才有效。如果用户使用具有某些浏览历史记录的现有选项卡,则此方法将不起作用。

您可以做的另一种方法是使用 sessionStorage 为您自己的应用模拟历史堆栈。每当用户导航到新页面时,您都会在 sessionStorage 中推送一条记录。当用户单击您的后退按钮时,您将从 sessionStorage 中弹出一条记录。因此,您可以检查 sessionStorage 是否为空,点击返回按钮将触发警报或某种形式。