Блог

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

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

И Nuxt рекомендует пользователям использовать промежуточное программное обеспечение для выполнения этих действий ‘beforeRoute’. Вот мой код.

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

Как вы можете видеть, я проверяю, является ли мой текущий маршрут определенной страницей (context.from.path …), спрашиваю пользователя, хочет ли он покинуть страницу. И если они отменены, что делает подтверждение ложным, сделайте

следующий (ложный)

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

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

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

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

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

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

 redirect(from.path)
 

вместо

 next(false)
 

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

 from, route, next, redirect...