（vue 路由器）禁用浏览器后退和前进箭头，并带有警告

Question

我正在创建一个多页测验，因此我需要用户无法返回到上一页。所以我写道：

const router = createRouter({
  history: createMemoryHistory(),
  routes
});

它正在工作（导航被禁用），但如果用户回击几次，它最终会在没有警告的情况下离开页面。

有没有办法给用户添加警告？

提前致谢

问候

Answer 1

您可以使用全局导航守卫来检查用户是否正在导航到可识别的路线，并在导航离开之前提示确认。

类似：

router.beforeEach((to, from) => {
  const route = this.$router.resolve(to)

  if (route.resolved.matched.length) {
    // the route exists, return true to proceed with the navigation
    return true
  }else{
     //the route does not exists, prompt for confirmation
    return confirm("Are you sure you want to leave this site?")
  }
})

Answer 2

事实证明解决方案在 Vue/VueRouter 之外：

window.addEventListener('beforeunload', function (e) {
    e.preventDefault();
    e.returnValue = '';
});

现在浏览器不会记录 Vue 特定的导航，单击后退箭头会显示浏览器的内置消息。

Answer 3

要拦截 Vue.js 应用程序中的浏览器后退按钮并显示警告，可以将 popstate 事件与历史记录 API 一起使用。

第 1 步： 将虚拟状态推入历史堆栈

当您的组件安装时，将新状态推送到历史堆栈。这允许您检测何时按下后退按钮。

onMounted(() => {
  // Add a new history entry
  history.pushState(null, '', window.location.href);

  // Listen for the popstate event
  window.addEventListener('popstate', onBrowserBack);
});

onUnmounted(() => {
  // Clean up the event listener
  window.removeEventListener('popstate', onBrowserBack);
});

第2步：拦截后退按钮按下

为 popstate 事件创建一个处理程序以防止导航并显示您的自定义模式。

function onBrowserBack(event) {
  // Prevent navigation by pushing the state again
  history.pushState(null, '', window.location.href);

  // Show the warning modal
  showWarningModal(); // you can use the default or use your own custom modal
}

function showWarningModal() {
    const confirmed = window.confirm('You have unsaved changes. Are you sure you want to leave this page?')
    if (confirmed) {
        // redirect to wherever you want
    }
}

如果用户确认，则继续导航。如果他们取消，则无需执行任何操作 - 导航已被阻止。