SPA pages are made up of multiple components. At this time, there is a problem of switching between components. Vue also puts forward the concept of dynamic components, so that we can better realize the switching effect between components. However, the switching of components in Vue is actually a process of re creation and destruction of components themselves. In some scenarios, we do not want components to be re created and re rendered

Here I will mainly introduce the switching of components in Vue and cache solutions

1, Switching mode of components

(1) Use v-if and v-else or (v-show)

<Com1 v-if="istrue" />
<Com2 v-else />

When istrue is true, Com1 is displayed; otherwise, Com2 is displayed

(2) Use the is feature to switch dynamic components

// Click switch to log in, register and exit the component

   <template>
     <div>
        <a href="#"@ click. Prevent =" comname = 'Login' "> login</a>
        <a href="#"@ click. Prevent =" comname = 'register' "> register</a>
        <a href="#"@ click. Prevent =" comname = 'logout' "> Exit</a>
        
        //  < component > < / component > to display the component with the corresponding name, which is equivalent to a placeholder
        //    The: is property specifies the component name

      <component :is="comName"></component>
      </div>
    </template>

(3) Use router to switch dynamic components

// Routing rules:
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue')
  },
  
  // Where components need to be displayed:
  <router-view />

2, Component cache

The component cache can cache the internal data of the component during dynamic component switching instead of going through the destruction process

Usage scenario: multi form switching to save the data in the form

1. Keep alive definition:

When wrapping dynamic components, inactive component instances are cached rather than destroyed.

It is an abstract component: it will not render a DOM element and will not appear in the parent component chain. When the component is switched in < keep alive >, its activated and deactivated life cycle hook functions will be executed accordingly.

2. Two hook functions of keep alive

activated	deactivated
Called when the keep alive component is activated	Called when the keep alive component is deactivated
This hook function is not called during server-side rendering	This hook is not called during server-side rendering

Using keep alive will keep the data in memory. If you want to obtain the latest data every time you enter the page, you need to obtain the data in the activated stage and undertake the task of obtaining the data in the original created hook function.

Note: these two lifecycle functions will be called only when the component is wrapped by keep alive. If they are used as normal components, they will not be called

After version 2.1.0, the two hook functions will not be called even if they are wrapped in keep alive after exclusion. This hook function will not be called when rendering on the server.

Component hook calls with cache set:

First entry: beforerouterenter - > created - > activated - > deactivated - > beforerouteleave

Subsequent entry: beforerouterenter - > activated - > deactivated > beforerouteleave

3. How to use keep alive

(1)Props

include - character string || array || regular       Components with matching names are cached-->include The value of is the value of the component name. 

exclude - character string || regular               Any component whose name matches will not be cached.

max - quantity                            Determines the maximum number of components that can be cached. 

(2) Use with < component > < / component >

  <template>
     <div>
        <a href="#"@ click. Prevent =" comname = 'Login' "> login</a>
        <a href="#"@ click. Prevent =" comname = 'register' "> register</a>
        <a href="#"@ click. Prevent =" comname = 'logout' "> Exit</a>
     
     // The login component will be cached. If include is not set, all components mounted to < component > < / component > will be cached by default
     // Cache multiple specified components include = ['login','register ']
      <keep-alive include="login">
          <component :is="comName"></component>
      </keep-alive>    
      </div>
    </template>

(3) Use with routing

The keepAlive property of routing meta information needs to be configured
Keep alive code can be wrapped in combination with v-if. If keep alive in meta is true, it will be cached, otherwise it will not be cached, which can be more flexible

 {
    path: '/login',
    name: 'login',
    component: () => import('../page/login.vue')
    meta:{
        keepAlive : true   // The login component is cached
    }
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('../page/index.vue'),
      meta:{
        keepAlive : false   //  The index component is not cached
    }
  }

<div id="app">
    <keep-alive> 
    <!-- View components that need to be cached -->
        <router-view v-if="$route.meta.keepAlive"> </router-view>
    </keep-alive>
    
    <!-- View components that do not require caching --> 
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>

(4) Clear cache components

 // Beforeroutleave() hook
 
// Determine whether to go to the details page

  beforeRouteLeave(to, from, next) {
      if (to.path === "/goods_detail") {
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
      }
      next();
    }

expand:

Beforeroutleave hook

Before route leave (to, from, next): a function executed before leaving the route, which can be used for reverse value transfer of the page and page Jump.

 // Click to get the data and return to the order address
  beforeRouteLeave (to, from, next) {
    if (to.name === 'home') {
      to.query.temp = 'Selected address'
    }
    console.log(to)
    console.log(from)
    next()//Don't forget to write
  },