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

Question

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

我做了一些 beforeRouteLeave <- Vue 官方文档中介绍的这种东西，但是 none 它们似乎在 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

我本可以使用

redirect(from.path)

而不是

next(false)

为了了解信息，传入参数 'context' 具有如下一些属性：

from, route, next, redirect...

Answer 2

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

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

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

How to prevent user to leave page using middleware in Nuxt?

router

middleware

guard

vue.js

nuxt.js