Что вызывает ошибку в Navigation Guards Vue?

Question

Olivia

vue

Что вызывает ошибку в Navigation Guards Vue?

Как правильно предотвратить переход со страницы, если введены данные? В коде, который я использую, вызывается хук роутера onBeforeRouteLeave. Если проверка условия checkChanges на верность возвращает true, я отображаю модальное окно с помощью showCurrentModal и возвращаю false. Однако, при таком подходе возникает ошибка "Error: Invalid navigation guard". Как это можно решить?

23 ноября 2023 г. 9:39

Ответы на вопрос 4

Похожие вопросы

Answer 1

Ошибка "Invalid navigation guard" возникает, когда в качестве возвращаемого значения у хука роутера onBeforeRouteLeave используется логическое значение (true/false), а не промис или функция обратного вызова. Чтобы предотвратить переход со страницы, если введены данные, вам необходимо использовать промис или функцию обратного вызова.

Пример использования промиса:
```javascript
import { createApp } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

const app = createApp(...)

app.mixin({
  methods: {
    showCurrentModal() {
      // Ваш код для отображения модального окна
    },
    checkChanges() {
      // Ваша проверка условия
    }
  }
})

app.mixin({
  methods: {
    onBeforeRouteLeave(to, from, next) {
      if (this.checkChanges()) {
        this.showCurrentModal()
          .then(() => {
            next(false)
          })
          .catch(() => {
            // Обработка ошибки при отображении модального окна
          })
      } else {
        next()
      }
    }
  }
})
```

Пример использования функции обратного вызова:
```javascript
import { createApp } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

const app = createApp(...)

app.mixin({
  methods: {
    showCurrentModal() {
      // Ваш код для отображения модального окна
    },
    checkChanges() {
      // Ваша проверка условия
    }
  }
})

app.mixin({
  methods: {
    onBeforeRouteLeave(to, from, next) {
      if (this.checkChanges()) {
        this.showCurrentModal(() => {
          next(false)
        }, () => {
          // Обработка ошибки при отображении модального окна
        })
      } else {
        next()
      }
    }
  }
})
```

В примерах используется миксин, чтобы добавить хук onBeforeRouteLeave ко всем компонентам приложения. Вы можете использовать его в нужных компонентах, если требуется применить эту логику только для некоторых страниц.

Answer 2

next(false) вызывается вместо return false для остановки навигации.

Answer 3

Используйте next(false) вместо return false для остановки навигации. 

Метод onBeforeRouteLeave имеет тип void, что означает, что он не должен возвращать значение.

Answer 4

Тип возвращаемого значения для метода onBeforeRouteLeave должен быть void, что означает, что он не возвращает никакого значения.

Решение: использовать следующий код для метода onBeforeRouteLeave:

```javascript
onBeforeRouteLeave((to, from, next) => {
  if(!checkChanges.value) {
    next();
  } else {    
    showCurrentModal.value = true
  }
})
```