Я выполнил горстку Vue. js одностраничных приложений, так и не удосужившись разобраться с историей должным образом, постыдно подумать. По какой-то причине я не могу понять, что делать с кнопками «назад» и «вперед». Поэтому я надеюсь, что кто-то может объяснить, как это сделать так, чтобы простой человек мог понять.
Мое требование в приложении, над которым я сейчас работаю, очень простое. У меня есть 4 «страницы», которые работают в качестве мастера, по порядку - пользователь начинает со страницы 1 и переходит на страницу 4 (подтверждение заказа). Страницы на самом деле делятся, например, <div v-if="stage==2">, <div v-if="stage==3">. Он работает нормально, пока клиент не нажимает кнопку «Назад», и в этом случае он покидает сайт. Так что я хочу, чтобы, когда клиент переходит на страницу 2, если в этот момент он нажимает кнопку «Назад», я хочу, чтобы он go вернулся на страницу 1. Если после этого он нажимает кнопку вперед, я хочу, чтобы они go вернулись на страницу 2. И так далее.
Я ценю, что мне нужно использовать history.pushState для кнопок навигации, а затем как-то отвечать на popState в ответ на нажатия кнопок назад / вперед, но мои эксперименты до сих пор не привели к тому, что я хочу, хотя Я уверен, что это очень просто, если вы знаете, как.
2 очка, чтобы отметить. Во-первых, я не использую Vue роутер для этого, просто нативный Javascript, в основном потому, что я не думал, что это оправдано для чего-то такого простого, а также потому, что приложение представляет собой непростую смесь Vue. js и JQuery, каннибализированные из существующей системы, чтобы получить что-то быстрое и грязное. Я с радостью сделаю это, если это облегчит жизнь. А во-вторых, я надеюсь и предполагаю, что с помощью History API я могу сделать это, не внося никаких изменений в URL. Нет смысла иметь разные URL-адреса для каждой страницы, и если пользователь перезагружает страницу, он все равно должен оказаться на этапе 1.