Как перенаправиться на ту страницу в которой находишься router.push Vue?

Question

Есть у меня функциональность, которая просто сбрасывает проект в начальное состояние и мне нужно перенаправиться на ту же самую страницу, в которой находишься

this.$router.push({name: this.$router.name, query: {}}) --> не работает

В данном случае я подразумевал, что пустой объект как бы задаст уникальность адресу и не будет ошибки

Avoided redundant navigation to current location: "/".

В русоанглоинтернете ничего не нашел, идей нету, как реализовать такую штуку (по идее обычный редирект на ту же самую страницу)

Answer 1

Невозможность сдеать редирект на ту же странуцу, происходит из-за того, что VUE не видит изменений.

Для решения подобной проблемы, я написал вот такой вот метод

function goToUrl(url) {
  if (url === location.pathname + location.search) {
    router.push({
      path: '/'
    });
  }
  router.push(url);
}

К сожалению, у него есть проблема, и заключается она в том, что сбивается история переходов.

Answer 2

Редирект vue-router'ом на ту же самую страницу, чисто логически не имеет смысла. Потому что это (по принципу действия) загрузка того же самого компонента в vue-слот.

Вместо того чтобы искать пути обхода правильного и ожидаемого поведения vue-router'а - следует ввести вспомогательный метод для "сброса" состояния компонента/приложения в исходное или пустое состояние, и вместо редиректа переиспользовать метод везде где такой сброс требуется.
То есть: вместо того чтобы костылить код ради допущенной ошибки проектирования, лучше будет просто исправить эту ошибку (предусмотрев в логике приложения операцию "сброс"/"возврат", и тем самым исключив саму потребность в костыле с редиректом).

Общие пути корректного решения:

для сброса глобального состояния (Vuex) - стейт инициализировать не литералом объекта, а функцей-фабрикой возвращающей объект стейта (и далее переиспользуем эту функцию в мутации устанавливающей все состояние целиком);
для сброса локального состояния компонента - можно использовать как функцию-фабрику объекта data объявленную вне компонента (тот же принцип, что и в пункте выше), так и метод компонента явно присваивающий исходные значения полям локального состояния.

В сценарии клонирования начального состояния (вместо использования фабрики), сократить код копирования вложенных в состояние объектов поможет деструктуризация, или использование утилит типа cloneDeep (из lodash).

БЛОГ НА HUSL

Как перенаправиться на ту страницу в которой находишься router.push Vue?

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