导航到另一个视图时保持视图状态

Question

我有一个VuesJS视图，其中有两个具有main-detail关系的组件。用户可以单击main组件中的某个项目（该项目将突出显示），而details组件将显示相关的详细项目。

products.vue

<main></main>
<details>></details>

用户可以编辑一个详细信息，我希望使用一个单独的视图进行，该视图包含编辑该详细信息的必要组件。

我希望用户能够以启动编辑操作时的状态导航回到products.vue视图（例如，完成编辑过程之后）。

我尝试将main和details分别包装在<keep-alive></keep-alive>中，但这似乎没有解决问题的方法。

我还阅读了几篇帖子，其中<keep-alive></keep-alive>周围的include属性与<router-view></router-view>一起使用，但是我不确定在include中包含什么我的情况。

是否有可能或我做错了什么？

谢谢

Answer 1

要在路由更改之外保持状态，则需要存储状态：

1. 位于<router-view>的父级组件中（例如<App>）
2. 在new vue instance with shared state中导入到所需组件中
3. 在official state management library Vuex中（推荐）