How to use the keep-alive cache function

This time I will bring you the keep-alivecachehow to use the keep-alive cache function, what are the notes for using the keep-alive cache function, the following is a practical case, let’s take a look .

Vue implements caching of component information

When we develop a vue project, we cannot avoid switching to other components in routing The component data will be reloaded after returning. To deal with this situation, we need to use keep-alive to cache the vue component information so that it will not be reloaded.

1. In app.vue

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

But in this case, all components will be cached, and single component caching cannot be achieved. Effect.

Then we add the grouping files. 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 implements the caching function of some components

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

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The use and difference between computed and methods in Vue.js

Detailed explanation of the steps to use js-cookie

The above is the detailed content of How to use the keep-alive cache function. For more information, please follow other related articles on the PHP Chinese website!