Блог

Главная - Вопросы по программированию - Как сделать так, чтобы next(false) в BeforeRouteEnter не позволял Vue-маршрутизатору переходить к маршруту?

Как сделать так, чтобы next(false) в BeforeRouteEnter не позволял Vue-маршрутизатору переходить к маршруту?

#vuejs2 #vue-router

#vuejs2 #vue-router

Вопрос:

Я отчаянно пытаюсь реализовать защиту навигации, которая не позволит пользователям получать доступ к странице элемента, если элемент не существует, на основе идентификатора, указанного в параметрах маршрута.

В руководстве Vue-Router говорится, что:

next(false): прервать текущую навигацию. Если URL-адрес браузера был изменен (вручную пользователем или с помощью кнопки «Назад»), он будет сброшен на URL-адрес маршрута from .

Тем не менее, в моем компоненте использование next(false) не предотвратит изменение маршрута или рендеринг компонента. Он даже не будет перемещаться назад, как было обещано в документе.

 beforeRouteEnter(to, from, next) {
    next(false)
    ajaxcall$.subscribe(data => next(vm => vm.setData(data)))

Я бы ожидал, что это next(false) сработает и предотвратит рендеринг компонента и маршрута, но нет. Выполняется вызов ajax и устанавливаются данные.

Комментарии:

1. вы должны добавить return оператор, чтобы избежать выполнения следующих выражений (т.Е. return next(false) ).

2. Я думаю next , это обратный вызов. Я не думаю, что обратные вызовы должны возвращать значения. Это все сломало бы.

3. не имеет значения, какое значение возвращается (или возвращается ли значение). дело в том, что вы должны return сразу после обратного вызова.

Ответ №1:

«Убедитесь, что следующая функция вызывается ровно один раз при любом заданном проходе через навигационную защиту». Маршрутизатор Vue — глобальный перед защитой

У вас несколько next() вызовов.

Кроме того, ваш ajaxcall$.subscribe() , скорее всего, асинхронный метод, поэтому к моменту его вызова next(vm => vm.setData(data)) навигация, скорее всего, уже произошла.

Вы должны использовать await , чтобы убедиться, что информация из ajax доступна перед вызовом next() .

Возможно, не очень хорошая идея замедлять каждый переход страницы с помощью вызова API, но это другая проблема…

Метки: ,