@Chetson
front-end разработчик

Как сделать правильную умную кнопку Назад в VueJS?

Перерыл пол-интернета в поиске ответа, и везде ничего конкретного не нашел, либо подходящего. Обращаюсь к сообществу со своим вопросом. Возможно, кто то уже сталкивался с такой дилеммой.

Не могу понять как сделать правильно кнопку НАЗАД в 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 и оттуда уже строить логику, но попахивает костылем.

Подскажите как быть?
  • Вопрос задан
  • 2225 просмотров
Пригласить эксперта
Ответы на вопрос 4
alvvi
@alvvi
export default apathy;
Так хорошо, вроде бы все классно. Теперь проблема с прямым переходом по ссылке в запись решена, только вот появляется другая проблема. Позиционирование скролла. При переходе go(-1) у нас сохраняются все записи которые были загружены в список, а при переходе to="/posts" компонент заново загружает записи и позиционируется вверху. Ну ладно, позиционирование, компонент просто еще раз начинает загружать данные.

Тут не понятно о каком позициноирование и загрузке идет речь, если у вас рендеринг различается при переходе на экран с постами через /posts и через router.go(-1) - это проблема другого характера и решать ее нужно вне этого вопроса. Различаться он может только отсутствием подгрузки во втором варианте, если вы не кэшируете данные и это нормально.
Проблема третья. Если, допустим, мы перешли в запись не с общего списка, а с предложенных новостей в каком то другом посте блога, то кнопка "назад" должна все-таки вести назад на предыдущую запись, а не в общий список.

Пишите в Store название роута куда нужно ридеректить при нажатии на Назад, на beforeRouteLeave экрана с предложенными новостями - меняете на другой роут.
Вроде-бы это как то реализуется через Хуки роутов, но к сожалению у меня нет такого опыта работы с ними.

В документации есть более чем подробная информация о всех хуках, читайте, пробуйте, получайте опыт.
Ответ написан
Комментировать
mylp
@mylp
php + js = site + crm
Router mode 'history'
Ответ написан
b0nn1e
@b0nn1e
Alcohol & Ruby on Rails
@senya_jan
Почему бы не смотреть, куда ведёт go(-1), а там уже через условия самому перенаправлять пользователя, если Вас не устраивает то, что внутри go(-1)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы