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

Question

I got a Nuxt application, and in some special route, I want to prevent user from leaving the page by showing plain confirm javascript dialog.

I did some beforeRouteLeave <- this kinda thingy introduced in the Vue official documentation, but none of them seemed work in Nuxt.

And Nuxt recommends users to use middleware for doing this 'beforeRoute' things. Here's my code.

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)
        }
    }
}

As you can see, I'm checking if my current route is certain page (context.from.path...), ask user if user wants to leave the page. And if they canceled, which makes confirm as false, do

next(false)

and it works fine as it makes the user stay on the page.

But the problem is, the loading bar of the browser still loads even if the page doesn't change. And it looks like the route is still changing anyway despite the actual page doesn't change.

How can I prevent this to happen?

Answer 1

I could have used

redirect(from.path)

instead of

next(false)

For the sake of information, the incoming argument 'context' has some properties like below:

from, route, next, redirect...