У нас есть чистое JS-приложение, построенное по принципу MVC, которое имеет собственный контроллер Nav. Сейчас мы пытаемся переместить его в VUE и испытываем трудности с маршрутизацией.
В настоящее время прямая навигация в старом приложении JS работает следующим образом:
Nav.setRoot(HomePage);
Nav.push(SecondPage);
Nav.push(DialogPage);
Это создает стек из 3 страниц. элементы один поверх другого. Со страницей диалога это просто небольшое всплывающее окно. Это сохраняет стек страниц и всех их данных.
<div class="page" id="page-HomePage" hidden></div>
<div class="page" id="page-SecondPage"visible></div>
<div class="page" id="page-DialogPage" visible active></div>
Очевидно, что при вызове Nav.back () последняя страница будет уничтожена, ее элемент будет удален из DOM, открывая предыдущие страницы:
<div class="page" id="page-HomePage" active></div>
<div class="page" id="page-SecondPage" deleting></div>
<div class="page" id="page-DialogPage" deleted></div>
В VUE, когда мы звоним
this.$router.push({name:"HomePage"});
this.$router.push({name:"SecondPage"});
this.$router.push({name:"DialogPage"});
Мы уничтожаем все предыдущие страницы сразу же! Поэтому, когда мы возвращаемся назад, страница воссоздается, и все ее состояние теряется.
<keep-alive> - работает только для одной предыдущей страницы.
Есть ли способ сохранить стеки состояние страниц в VUE или я пытаюсь сделать что-то, для чего VUE не предназначен?
Реализация управления состоянием для чего-то подобного выглядит излишним для меня.
Нужно ли мне внедрятьмой собственный контроллер навигации для решения этой задачи?