vue.js - 使用 vue-router 保存组件状态？

Question

我有一个列表/详细信息用例，用户可以双击产品列表中的项目，转到详细信息屏幕进行编辑，然后在完成后返回列表屏幕。我已经使用此处描述的动态组件技术完成了此操作:https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components .但现在我打算在应用程序的其他地方使用 vue-router，我想重构它以使用路由。借助我的动态组件技术，我使用保持事件状态来确保当用户切换回 ListView 时，会出现与编辑前相同的选择。但在我看来，通过路由，产品列表组件将被重新呈现，这不是我想要的。

现在，看起来 router-view 可以包裹在 keep-alive 中，这会解决一个问题，但会引入许多其他问题，因为我只希望该路由保持事件状态，而不是所有(目前我只使用一个顶级路由器 View )。 Vue 2.1 通过为路由器 View 引入 include 和 exclude 参数显然做了一些事情来解决这个问题。但我也不想这样做，因为必须在我的主页上预先声明所有应该或不应该使用 keep-alive 的路由似乎很笨重。在配置路由时(即在路由数组中)声明是否要保持事件状态会更简洁。那么我的最佳选择是什么？

Answer 1

您可以指定要保持事件状态的路线，例如:

<keep-alive include="home">
  <router-view/>
</keep-alive>

在这种情况下，只有主路由会被保持存活