Keep-alive principle: The name of the component is matched with the name value of the route. If a match is found, the component is cached. Cached pages are switched without data requests.

Include and Exclude Prop allow components to cache conditionally. Both can be represented as comma-delimited strings, regular expressions, or an array. Matching first checks the name option of the component itself, and if the name option is not available, matches its locally registered name (the key value of the parent component’s Components option). The anonymous component could not be matched.

When a TAB is switched, you want to cache the contents of a TAB page. 2, query list page, want to cache query results. Do not: Cache the new page. Because multiple new pages can be added, caching results in consistent data for pages rather than restarting a new page.

Use examples:

// Use with '<transition>', single component <transition> <keep-alive :include="compNameArr" >< Component :is="view"></component> </keep-alive> </transition> data(){ compNameArr: ['HelloWorld', 'b'], <transition name="move" mode=" out-of-in "> <keep-alive :include="compNameArr" > <router-view></router-view> </keep-alive> </transition>Copy the code

!!!!!!!!! Make sure that components and routes have name names

!!!!!!!!! Make sure that components and routes have name names

!!!!!!!!! Make sure that components and routes have name names

eg:

   HelloWorld.vue
    <script>
     export default{
         name:"HelloWorld",
     }
    </script>
    
    router/index.js
    {
        name:"HelloWorld",
        path:"/HelloWorld",
        component:()=>import('@/components/HelloWorld.vue'),
        
    }
Copy the code

Vue official website: cn.vuejs.org/v2/api/#kee…

But tears and achievement ^_^