如何在 vue 中复制组件状态？

Question

我的目标是在我的 vue.js 应用程序中创建多个工作区，其中会有很多表单。切换工作区时，应保留该路由的状态（如未保存的表单输入）。

我尝试像这样使用 tab：

<tabs>
    <tab name="W1">
        This is the content of the first tab
    </tab>
    <tab name="W2">
        This is the content of the second tab
    </tab>
</tabs>

将其与 vue-router 一起使用时，不会保存表单的内容。

所以我打算在任何路线更改之前保存组件的数据，并在进入同一路线之前将其复制回来。 有没有更好的方法来保存和检索组件的状态？

我还有其他方法可以继续吗？

更新

 <keep-alive>
     <router-view :key="$route.fullPath"></router-view> 
 </keep-alive>

这个有效。

Answer 1

我会建议你检查一下：Keep alive

即使您更改了选项卡，它也会使您的组件在<keep-alive> 中保持活动状态。 这样您就可以将表单数据保存在组件中，如果您希望在提交之前拥有多步骤表单，这也非常有用。