Implementation of vue's keep-alive cache function

This article mainly introduces the implementation of vue's keep-alive cache function. Now I share it with you and give it as a reference.

Vue implements caching of component information

When we develop a vue project, it is inevitable that the component data will be lost after the route is switched to other components and then returned. Reloading, to handle this situation we need to use keep-alive to cache vue's component information so that it will not be reloaded.

1. In app.vue

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

But this situation will cause Caching all components cannot achieve the effect of caching a single component.

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

In app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>

<!-- 这里不会被keepAlive -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

##2. In the routing index.js page

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

This realizes the caching function of some components

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

activated: function () {
  this.data = ‘'
}

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

Very practical ajax user registration module

Ajax clicks to continuously load the data list (graphic tutorial )

Ajax Struts2 implements verification code verification function (graphic tutorial)

The above is the detailed content of Implementation of vue's keep-alive cache function. For more information, please follow other related articles on the PHP Chinese website!