vue中keep_alive使用

 

总结：keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。

1.在App.vue中添加配置：

if="$route.meta.keep_alive">

if="!$route.meta.keep_alive">

 

 

2.在需要缓存的页面，配置路由

  {
      path: '/',
      name: 'headers',
      component: headers,
      meta:{
        keep_alive:true
      }
    },

3.使用，子组件header.vue

4.父组件 detail.vue

5.include/exclude两个属性 可以针对性缓存相应的组件

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

<keep-alive include="a,b">
  <component :is="view">component> keep-alive>

"includedComponents">
  

 

转载于:https://www.cnblogs.com/huanhuan55/p/10108243.html