在页面之间导航时保​​持堆栈和状态

Question

我们有一个基于MVC原理构建的纯JS应用程序，该应用程序具有自定义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并非为之设计的事情？

对这样的事情实施状态管理对我来说似乎太过刻意了。

我需要实现自己的导航控制器来完成该任务吗？