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

Question

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

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

原文由 John Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以指定要保持活动状态的路线，例如：

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

在这种情况下，只有主路由会保持活动状态

原文由 Alex Garcia 发布，翻译遵循 CC BY-SA 4.0 许可协议