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

Question

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

products.vue

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

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

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

我尝试将main 和details 分别包装在<keep-alive></keep-alive> 中，但这似乎没有奏效。

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

关于这是否可能或我做错了什么有什么想法吗？

谢谢

Answer 1

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

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