keep-alive

什么是keep-alive

keep-alive是用来缓存组件，避免多次加载相应的组件，减少性能消耗，比如从页面1跳转到其他页面后回退到页面1不用重新执行页面1的代码，只会2从缓存中加载已经缓存的页面1，这样可以减少加载时间，减少性能消耗，提高用户体验性。

什么时候用keep-alive

如果需要频繁切换路由，这个时候可以考虑leep-alive，来达到避免数据的重复请求的目的。

如何使用keep-alive

<keep-alive>
   <router-view> </router-view>
</keep-alive>

如果需要缓存部分页面或者组件可以使用如下方法：
（1）使用route.meta

<keep-alive>
   <router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"> </router-view>

routes配置：

routes:[
	{path: '/test1',component: test1,meta:{keepAlive: true}},
	{path: '/test2',component: test2,meta:{keepAlive: false}}
]

表示test1使用keep-alive，test2不使用。
（2）使用新增属性include/exclude
该方法前提是需要知道组件的name.
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
// 组件 a

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

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component>
</keep-alive>

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