keep-alive本身是vue2.0的功能，可以使被包含的组件保留状态，或避免重新渲染

标签<keep-alive>具有属性：
	1. include：
		内容要求字符串或正则表达，只有匹配的组件会被缓存
	2.exclude：
		内容要求字符串或正则表达式，任何匹配的组件都不会被缓存
	实例：
		// 组件 component
		export default {
			name: 'a',
			data () {
				return {}
			}
		}
		<!-- name 为 a 的组件将被缓存！ -->
		<keep-alive include="a">
			<component></component>
		</keep-alive>
 
		<!-- 除了 name 为 a 的组件都将被缓存！ -->
		<keep-alive exclude="a">
			<component></component>
		</keep-alive>

keep-alive也可以作为router的配置属性，设定在路由中
	例如：
		import Vue from 'vue'
		import Router from 'vue-router'
		Vue.use(Router)
		export default new Router({
			{
				//home会被缓存
				path:"/home",
				component:home,
				meta:{
					keepAlive: true
				}
			}
			{
				//hello不会被缓存
				path:"/hello",
				component:hello,
				meta:{
					keepAlive: false
				}
			}
		})
	读取可以通过$route.meta.keep-alive

实例：
<template>
  <div id="app">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!--这里是其他的代码-->
  </div>
</template>

<router-view> 也是一个组件，如果直接被包在 <keep-alive> 里面，所有路径匹配到的视图组件都会被缓存
当然也可以通过添加<keep-alive>的属性include或者exclude,配置组件name进行筛选

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
而传统的mounted和estroyed的生命周期钩子函数不会被触发。
如此使得被keep-alive组件包裹的组件的状态得以保留也避免了该组件的重复渲染。
如果要在该组件内做进入的局部数据更新，可以在activated中进行数据更新。

也可以通过更改keep-alive在router中的属性值来控制页面本次加载是否缓存数据
当需要在离开页面前改变去往页面的缓存状态时，仅需要在页面中添加beforeRouteLeave
实例：
	export default {
        data() {
            return {
                
            };
        },
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = false;
            next();
        }
    }