<keep-alive>

  <component v-bind:is="view"></component>

</keep-alive>

activited        keep-alive专属，组件被激活时调用

deadctivated    keep-alive专属，组件被销毁时调用

<!-- 失活的组件将会被缓存！-->

<keep-alive>

  <component v-bind:is="currentTabComponent"></component>

</keep-alive>

<keep-alive>

  <component>

    <!-- 该组件将被缓存！ -->

  </component>

</keep-alive>

• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

  // 组件 a
  
  export default {
  
    name: 'a',
  
    data () {
  
      return {}
  
    }
  
  }

  <keep-alive include="a">
  
    <component>
  
      <!-- name 为 a 的组件将被缓存！ -->
  
    </component>
  
  </keep-alive>可以保留它的状态或避免重新渲染

  需要router

  <keep-alive>
  
      <router-view>
  
          <!-- 所有路径匹配到的视图组件都会被缓存！ -->
  
      </router-view>
  
  </keep-alive>

  • 使用 include/exclude
  • 增加 router.meta 属性

    // 组件 a
    
    export default {
    
      name: 'a',
    
      data () {
    
        return {}
    
      }
    
    }

    <keep-alive include="a">
    
        <router-view>
    
            <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
    
        </router-view>
    
    </keep-alive>

    增加router属性

    // routes 配置
    
    export default [
    
      {
    
        path: '/',
    
        name: 'home',
    
        component: Home,
    
        meta: {
    
          keepAlive: true // 需要被缓存
    
        }
    
      }, {
    
        path: '/:id',
    
        name: 'edit',
    
        component: Edit,
    
        meta: {
    
          keepAlive: false // 不需要被缓存
    
        }
    
      }
    
    ]    

    <keep-alive>
    
        <router-view v-if="$route.meta.keepAlive">
    
            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    
        </router-view>
    
    </keep-alive>
    
    <router-view v-if="!$route.meta.keepAlive">
    
        <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
    
    </router-view>

    分析一个写的很详细的地方：很详细https://www.jianshu.com/p/0b0222954483

  •