Как запретить пользователю покидать страницу, используя промежуточное ПО в Nuxt?

Question

У меня есть приложение Nuxt, и по какому-то особому маршруту я хочу запретить пользователю покидать страницу, открыв диалоговое окно простого подтверждения javascript.

Я сделал несколько beforeRouteLeave <- эта штука введена в Vueофициальная документация, но ни одна из них не показалась работающей в Nuxt. </p>

И 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 ...), спрашиваю пользователя, хочет ли пользователь покинуть страницу.И если они отменены, что делает подтверждение ложным, выполните

next (false)

, и он работает нормально, поскольку заставляет пользователя остатьсяна странице.

Но проблема в том, что панель загрузки браузера по-прежнему загружается, даже если страница не изменяется.И похоже, что маршрут все равно меняется, несмотря на то, что фактическая страница не меняется.

Как я могу предотвратить это?

Answer 1

Чтобы убедиться, что запрос адресной строки (?bla=bla) не коснулся, я рекомендую сделать это:

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

Answer 2

Я мог бы использовать

redirect(from.path)

вместо

next(false)

Ради информации, входящий аргумент 'context' имеет некоторые свойства, как показано ниже:

from, route, next, redirect...