keep-alive
作用：对组件进行缓存，提高性能。
说明：啥意思呢？有两个组件A、B。我们在A组件上操作的数据，此时我们切换到组件B，再切换到A组件，A组件并不会重新渲染，而是保存之前的状态。
keep-alive是一个抽象标签，不会被渲染承具体的dom元素。这点与template类似。
<keep-alive :include="componentsList">
<router-view></router-view>
</keep-alive>
其中，
include（包含）属性是一个被缓存组件name的数组。其中的组件都会被缓存。
exclude（排除）属性是一个不被缓存组件name的数组。其中的组件都不会被缓存。
注意：是组件的name属性，不是路由的name属性。
如果需要缓存的页面太多，在数组中一个个添加name，显然有点太繁琐了。利用meta属性来进行控制我们需要进行缓存的页面：
方法：在路由meta设置是否进行缓存的标记
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
在router-view中进行判断，需要缓存则放入keep-alive标签中。
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<router-view v-if="!this.$router.meta.keepAlive"></router-view>
<!--这里是不会被缓存的组件-->
activated钩子函数
什么时候调用？
答：进入已经缓存的页面时，触发的钩子函数。
记住：包含了keep-alive的组件，created()、mounted()都只会触发一次。但是activated每一次进入组件，都会触发一次哦~
