Как правильно организовать динамический поиск VueJS?

Question

в App.vue

у меня есть watch, который отслеживает this.$route.query

watch: {
  '$route.query': {
    handler: function(query_string) {
      // здесь код
    },
    deep: true,
    immediate: true
  } 
}

и есть метод router_push, который добавляет (или заменяет значение) GET-параметры к пути.

router_push(query_string) {
    let query_object = Object.fromEntries(query_string.split("&").map((pair) => pair.split("=")))
    for (let key in router.currentRoute.query) {
      for (let key_inner in query_object) {
        if (key_inner !== key) {
          query_object[key] = router.currentRoute.query[key]
        }
      }
    }
    const result_query_string = Object.entries(query_object)
      .map((pair) => pair.join("="))
      .join("&");
    router.push(`${router.currentRoute.path}?${result_query_string}`).catch(err => console.log(err))

  },

Исходя из логики, все должно работать, однако происходит ошибка Avoided redundant navigation to current location: "/?search_type=device_title&search=1"

Как-то нужно всё через params оформить, но у меня тут я не знаю сколько GET-параметров будет

Answer 1

Сообщение "Avoided redundant navigation to current location" означает то, что vue-router предотвратил переход по текущему (тому же самому) пути.

Наилучшим способом обхода такой ситуации, является проверка на отличие нового пути от текущего, перед вызовом метода router.push: если новый путь то же самый, то метод не вызывать.
Проверку можно выполнить используя массив $route.matched - об этом написано в официальной документации, плюс еще пример кода проверки можно найти в ответе @AdonisGaitatzis на enSO (решение №2).

Другим, плохим решением - будет подавление ошибок бросаемых методом push. В твоем коде, для этого достаточно будет убрать вызов console.log(err)... но делать так я не советую.
Меньшим злом (но все же злом) будет такой вариант, который подавляет только часть ошибок:

router.push(route).catch(err => {
  // Игнорируем ошибки относящиеся к переходу на ту же самую страницу
  if (
    err.name !== 'NavigationDuplicated' &&
    !err.message.includes('Avoided redundant navigation to current location')
  ) {
    // но выводим/обрабатываем все прочие ошибки
    console.error(err);
  }
});

^{Источник - ответ @Luckylooke на enSO}

БЛОГ НА HUSL

Как правильно организовать динамический поиск VueJS?

Ответы (1 шт):