vue.js - 如何防止用户在 Nuxt 中使用中间件离开页面？

Question

我有一个 Nuxt 应用程序，在一些特殊的路由中，我想通过显示普通的确认 javascript 对话框来防止用户离开页面。

我做了一些 beforeRouteLeave <- Vue 官方文档中介绍的这种东西，但它们在 Nuxt 中似乎都不起作用。

并且 Nuxt 建议用户使用中间件来完成这些“beforeRoute”操作。这是我的代码。

export default function (context) {
    if (process.client &&
        context.from.path.includes("board/write") &&
        context.route.name !== "board-articleId") {
        if (!confirm("Are you sure you want to leave the page?")) {
            context.next(false)
        }
    }
}

如您所见，我正在检查我当前的路线是否是某个页面(context.from.path ...)，询问用户是否要离开该页面。如果他们取消了，这使得确认为假，做

下一个(假)

它工作正常，因为它让用户停留在页面上。

但问题是，即使页面没有变化，浏览器的加载栏仍然加载。尽管实际页面没有改变，但看起来路由仍在改变。

我怎样才能防止这种情况发生？

Answer 1

为确保地址栏查询 (?bla=bla) 未被触及，我建议这样做:

export default function ({ from }) {
  redirect(from);
}