Implementation of keep-alive cache function of vue

Vue implements the cache of component information

When we are developing vue projects, we cannot avoid the reload of the component data after the route is switched to other components and returned. In this case, we need to use keep-alive to cache the component information of vue so that it will not be reloaded.

1. Inside

<keep-alive>
  <router-view></router-view>
</keep-alive>

However, this situation will cache all components and cannot achieve the effect of caching a single component.

Then we add some components and the implementation method is as follows:

exist

<!--Here is a needkeepaliveof-->
<keep-alive>
  <router-view v-if="$"></router-view>
<keep-alive>

<!-- It won't be herekeepAlive -->

<router-view v-if="!$"></router-view>

2. On the routing page

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // This requires keepalive}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // This will not be kept}

This implements the caching function of some components

If the cached component wants to clear data or execute the initialization method, call the activated hook function when loading the component, as follows:

activated: function () {
   = ‘'
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.