[Vuejs]-How do I keep the data when I change routes?

Wrap <router-view> with Vue’s built-in <keep-alive> component to keep the component instance alive between route changes:

// App.vue
<template>
  ...
  <keep-alive> 👈
    <router-view></router-view>
  </keep-alive>
</template>

demo

You can maintain the data in VueJS in two main ways:

1. Using the local component data property
2. Using Vuex

When you are working on an application which is having fewer components and your application is quite small then you can go for the local data property of the component for maintaining the state. In this case, when you want to pass the data between the component then you can use props and events to share the data between components.

If your application is big and you need to share a lot of data between components, so using the local data property will need many operations to share the data, so in this case, you can use Vuex which will help you to maintain a global store which can be used by all the components to access the data.