How to copy component state in vue?

Question

My goal is to create multiple workspace in my vue.js app where there will be many forms. When switching workspaces the state of that route should be retained (like unsaved form inputs).

I tried using tab like this:

<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>

When using this with vue-router, the content of the form is not saved.

So I'm planning to save the data of a component before any route change and copy it back before same route entry. Is there a any better way on saving the state of a component and retrieving it?

Also is there any other way I could proceed?

Update

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

This one works.

Answer 1

I will recommend you to check this: Keep alive

It will keep your component inside <keep-alive> alive even after you change the tab. This way you can keep your form data in your component and it's also very helpful if you want to have multi-steps form before submission.