Ошибка NavigationDuplicated: Avoided redundant navigation to current location в Nuxt.js (особенно в версии 2) возникает, когда приложение пытается перейти на тот же маршрут, на котором оно уже находится, что является избыточной навигацией.
Это может происходить в нескольких случаях, например:
- Пользователь кликает на ссылку, которая ведет на текущую страницу.
- В коде программы используется явный вызов навигации с параметрами, которые не изменяют маршрут.
Возможные решения
Игнорирование этой ошибки (silent fail):
Если не критично, вы можете просто подавить это предупреждение, используя стандартные механизмы Vue Router. Для этого можно поймать ошибку и игнорировать её:
this.$router.push({
path: '/your-path',
query: { brands: 'lixiang' }
}).catch(err => {
if (err.name !== 'NavigationDuplicated') {
throw err
}
})
Проверка перед выполнением навигации:
Чтобы избежать перехода на тот же маршрут, вы можете проверить текущий путь перед вызовом this.$router.push():
const { path, query } = this.$route;
if (path !== '/your-path' || query.brands !== 'lixiang') {
this.$router.push({
path: '/your-path',
query: { brands: 'lixiang' }
});
}
Использование replace вместо push:
Иногда проблема решается, если вместо this.$router.push() использовать this.$router.replace(), так как это не создает новую запись в истории маршрутов:
this.$router.replace({
path: '/your-path',
query: { brands: 'lixiang' }
});
Отложенный вызов навигации:
В некоторых случаях помогает отложить навигацию на следующий кадр рендеринга с помощью nextTick:
this.$nextTick(() => {
this.$router.push({
path: '/your-path',
query: { brands: 'lixiang' }
}).catch(err => {
if (err.name !== 'NavigationDuplicated') {
throw err;
}
});
});
Если вы используете динамические маршруты, нужно также убедиться, что маршруты и параметры передаются корректно, и проверять, что изменение параметров действительно приводит к изменению состояния приложения.
Пригодилась информация? + в коммент ;)