“我该如何培养孩子？”；您确定要离开页面吗？“；vue.js路由器中的弹出窗口？

我正在构建一个vue.js应用程序。我们希望在用户试图离开特定页面时弹出一个弹出窗口。弹出窗口应该是“你确定要离开页面吗？”我知道我可以在组件的beforeRouteLeave钩子中实现一些东西，但我想知道是否有一种方法可以在路由器的beforeEach事件（即，不是组件）中实现这一点。我之所以要使用路由器，是因为路由器中的beforeach似乎会响应用户在浏览器url栏中输入的不同路径，而组件上的beforeRouteLeave钩子则不会。但是，我不能访问路由器中的弹出窗口，而我可以访问组件中的弹出窗口（弹出窗口只是模板的一部分）

所以问题是：在用户实际离开页面之前，我如何在路由器中弹出一个弹出窗口

---

谢谢。

首先，您可以在路由器内部的routes数组或其他字段（如requiredConfirmation或类似字段）中为每个routes对象指定一个名称，假设我们有这样一个routes：

routes : [
    {
    path : '/needconfirm',
    component : NeedConfirmToLeaveCom,
    name : 'needconfirm-route1'
  },
    {
    path : '/neednotconfirm',
    component : NeedNotConfirmToLeaveCom,
    name : 'normal-route1'
  },
]

然后您可以使用

router.beforeach

根据您的出发路线和目的路线设置一些条件或一些确认。 大概是这样的：

router.beforeEach((to,from,next) => {
  if(from.name.startsWith("needconfirm-")) {
    if(window.confirm("Are you sure you want to leave the page?")) {
      next();
    }
  }else next();
});

更新*： 如果您想在弹出窗口中使用一些自定义组件，可以使用vuex存储组件的逻辑和切换程序，并将该组件导入App.Vue或其他您希望的根/子组件中。因为您可以使用

$store

访问门店管理，对吗

更新**： 还有一件事我想提一下，如果你想保存一些进度或状态，因此你想得到用户的确认（如果他们切换路线，进度将丢失），您应该考虑使用VUEX来存储应用程序的进度或状态，如果您需要更多的持久解决方案，可以使用使用LoalStury.V/P>的VuExistSistar存储管理。

---

您应该在卸载该视图中主组件上的事件侦听器之前使用

根据浏览器的不同，它将显示带有填充默认值的弹出窗口

这就是我在主组件的
创建的
钩子中使用它的方式

 window.addEventListener("beforeunload", (e) => {
    e.preventDefault()
    // chrome requires returnValue to be set
    const message = "You have unsaved changes. Are you sure you wish to leave?"
    e.returnValue = message
    return message
})