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{
    }
  },
}
原文地址:https://www.cnblogs.com/ourLifes/p/7526861.html