Перерыл пол-интернета в поиске ответа, и везде ничего конкретного не нашел, либо подходящего. Обращаюсь к сообществу со своим вопросом. Возможно, кто то уже сталкивался с такой дилеммой.
Не могу понять как сделать правильно кнопку НАЗАД в VUE JS приложении с подключенным VUE ROUTER.
Приведу на простом примере, на блоге.
Есть список записей блога по URL : /posts
Есть страница просмотра записи блога URL : /post/:id
На странице просмотра записи имеется кнопка назад. По документации VUE JS это делается простым
router.go(-1)
И все вроде бы хорошо, но если мы зайдем напрямую в просмотр записи??? То куда будет вести
router.go(-1)
??? Правильно - никуда. Вариант не подходит, так как нам надо вернуться обратно в список записей блога.
Следующий вариант, указать напрямую
<router-link to="/posts" class="backlink">
Назад
</router-link>
. Так хорошо, вроде бы все классно. Теперь проблема с прямым переходом по ссылке в запись решена, только вот появляется другая проблема. Позиционирование скролла. При переходе go(-1) у нас сохраняются все записи которые были загружены в список, а при переходе to="/posts" компонент заново загружает записи и позиционируется вверху. Ну ладно, позиционирование, компонент просто еще раз начинает загружать данные.
Проблема третья. Если, допустим, мы перешли в запись не с общего списка, а с предложенных новостей в каком то другом посте блога, то кнопка "назад" должна все-таки вести назад на предыдущую запись, а не в общий список.
Я пытался найти что-то типа REFFERER истории переходов, чтобы на основе нее построить логику, но ничего подобного так и не смог найти. Вроде-бы это как то реализуется через Хуки роутов, но к сожалению у меня нет такого опыта работы с ними.
Есть идея, записывать, к примеру, 5 последних переходов в STORE в массив refferers и оттуда уже строить логику, но попахивает костылем.
Подскажите как быть?