Vue学习--keep-alive

keep-alive缓存组件，避免多次加载相应的组件，减少性能消耗。

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

<keep-alive include="KeepAlive">
  <router-view  ></router-view>
</keep-alive>

include 使该标签作用于所有name属性的值跟此标签 include的属性值一致的vue页面

exclude 使该标签不作用于所有name属性的值跟此标签 exclude的属性值一致的vue页面

 

使用include/exclude 属性需要给所有vue类的name赋值（注意不是给route的name赋值），否则 include/exclude不生效

给name赋值的方法：

在vue类中赋值，与data、components等平级

export default {
 name:'KeepAlive',
 components: {
   },
 data () {
 return{
    }
  },
}