1 Vue keep-alive实践总结  2 
     
      是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。  3   4 
      
        包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 
       
         相似，
        
          是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。  5   6 prop:  7   8 include: 字符串或正则表达式。只有匹配的组件会被缓存。  9 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 10 在2.1.0版本Vue中 11  12 常见用法： 13  14 // 组件 15 export default { 16   name: 'test-keep-alive', 17   data () { 18     return { 19         includedComponents: "test-keep-alive" 20     } 21   } 22 } 23 
         
           24   
           25   
           26 
          27  28 
         
           29   
           30   
           31 
          32  33 
          34 
         
           35   
           36 
          37  38 
          39 
         
           40   
           41 
          42  43 
         
           44   
           45   
           46 
          47  48 结合router，缓存部分页面 49  50 使用$route.meta的keepAlive属性： 51  52 
         
           53     
           54 
          55 
          56 需要在router中设置router的元信息meta： 57  58 //...router.js 59 export default new Router({ 60   routes: [ 61     { 62       path: '/', 63       name: 'Hello', 64       component: Hello, 65       meta: { 66         keepAlive: false // 不需要缓存 67       } 68     }, 69     { 70       path: '/page1', 71       name: 'Page1', 72       component: Page1, 73       meta: { 74         keepAlive: true // 需要被缓存 75       } 76     } 77   ] 78 }) 79 使用效果 80  81 以上面router的代码为例： 82  83 
          84 
          91 
          92 
          97 (1) 在Page1页面输入框输入“asd”，然后手动跳转到Hello页面； 98  99 (2) 回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；100 101 102 103 ​ 图1 进入Page1页面，并输入"asd"104 105 106 107 ​ 图2 跳转到Hello108 109 110 111 ​ 图3 返回Page1页面，输入框数据会被保留112 113 当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，114 115 借鉴一下 vue-router 之 keep-alive，作者：RoamIn这篇博客中的例子：116 117 首页是A页面118 B页面跳转到A，A页面需要缓存119 C页面跳转到A，A页面不需要被缓存120 思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：121 122 A的路由：123 124 {125     path: '/',126     name: 'A',127     component: A,128     meta: {129         keepAlive: true // 需要被缓存130     }131 }132 export default {133     data() {134         return {};135     },136     methods: {},137     beforeRouteLeave(to, from, next) {138          // 设置下一个路由的 meta139         to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新140         next();141     }142 };143 export default {144     data() {145         return {};146     },147     methods: {},148     beforeRouteLeave(to, from, next) {149         // 设置下一个路由的 meta150         to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新151         next();152     }153 };