How vue+keep-alive operates website cache

This time I will show you how vue keep-alive operates the website cache, and what are the precautions for vue keep-alive to operate the website cache. The following is a practical case, let's take a look.

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 in this case, all components will be cached, and single component caching cannot be achieved. Effect.

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 the data or execute the initialization method, call the activated hook when loading the component 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:

Use vue-route beforeEach to make navigation guards

How Webpack operates cache

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