Ошибка в Vue-Router: «NavigationDuplicated: Avoided redundant navigation to current location»?

Question

[movsumlu]

добрый день, может кто-то уже сталкивался c такой проблемой,
есть кнопка "создать заказ" в "шапке" страницы, по которой происходит this.$router.push({ name: 'item', params: { id: id.v4() } }) и генерируется новый id, который вставляется в адресную строку, но при попытке создать новый заказ из карточки нового заказа (т.е. мы нажали на создать новый заказ, нас перебрасывает на новую, только созданную карточку нового заказа и из нее мы пытаемся нажать еще раз "создать заказ") возникает ошибка: "NavigationDuplicated: Avoided redundant navigation to current location ..."
пытался использовать this.$router.push...catch(() => {} не помогло, даже не получается использовать хуки router-а, так как сразу возникает ошибка

{
path: '/order-item',
component: OrderItem,
meta: {
title: 'Заказ'
},
children: [
{
path: '/order-item/:id',
name: 'order__item',
component: OrderItem,
meta: {
title: 'Заказ'
}
}
]
}

Comments

[Дмитрий]

Первый раз вижу, чтобы функцию в id передавали.
Сделайте computed свойство

[Роман Ямчук]

Эта ошибка возникает при попадании на тот же роут. Решение с "catch..." просто глушит ошибку.
В качестве решения могу предложить - добавлять в query каждый раз уникальный параметр, например текущий timestamp

[romanown]

Роман Ямчук, добавлять в query каждый раз уникальный параметр не помогает почему-то. та же ошибка. возможно ему не важно это, а главное путь (роут)? не нашел таких данных.

Answer 1

[BryantsevV]

ошибку заглушить можно только вот так.

const originalPush = VueRouter.prototype.push;

VueRouter.prototype.push = function push(location, onComplete, onAbort) {
    const result = originalPush.call(
        this,
        location,
        onComplete,
        onAbort
    );
    if (result) {
        return result.catch(err => {
            if (err.name !== 'NavigationDuplicated') {
                throw err;
            }
        });
    }
    return result;
};

const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location, onComplete, onAbort) {
    const result = originalReplace.call(
        this,
        location,
        onComplete,
        onAbort
    );
    if (result) {
        return result.catch(err => {
            if (err.name !== 'NavigationDuplicated') {
                throw err;
            }
        });
    }
    return result;
};