我如何在vue.js路由器中弹出“您确定要离开页面吗？”弹出窗口？

Question

我正在构建vue.js应用程序。当用户尝试离开特定页面时，我们希望弹出一个窗口。弹出窗口应显示“您确定要离开页面吗？”我知道我可以在组件的beforeRouteLeave挂钩中实现某些功能，但是我想知道是否有一种方法可以在路由器的beforeEach事件中实现此功能（即，不是该组件）。我之所以要使用路由器，是因为路由器中的beforeEach似乎响应用户在浏览器网址栏中输入不同的路径，而组件上的beforeRouteLeave钩子却没有。但是，我不能访问路由器中的弹出窗口，而可以访问组件中的内容（弹出窗口只是模板的一部分）。

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

谢谢。

Answer 1

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

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

然后，您可以使用router.beforeEach根据您的原始路线和目的地路线来设置某些条件或某些确认。像这样的东西：

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