关于vue的keep-alive

 一、keep-alive 的作用：

    1 具有缓存的作用

       通过在router.js中的meta配置中添加keepAlive:ture来指定对哪个组件进行缓存

       

    2 具体加了这个有什么影响？

       由于加了keepAlive:true，则该组件被缓存到内存中，那么其他的钩子函数都将不会再执行，除了activated(进来)

       和deactivated(离开)，这2个会相应执行，这2个钩子函数是专门for keep-alive的，因此如果需要加keepAlive的组件中需要做什

       初始化的操作，则可以放在activated中执行

二、如何添加keep-alive

    1 在App.vue中添加<keep-alive>包裹<router-view>

      下面加了v-if，意思是如果有配置meta下的keepAlive:true，则使用

      <keep-alive>包裹<router-view>，否则正常的<router-view就行>

<!--缓存想要缓存的页面，实现后退不刷新-->
<!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
<keep-alive>
        <router-view v-if="$route.meta.keepAlive" ref="MainView"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" ref="MainView"></router-view>

    2 在router.js中对你想要缓存的组件添加keepAlive:true

       也就是如果你要下次回到这个组件时不执行那些钩子函数，

       就在对应的配置下加上keepAlive:true，像下面这样就可以了

routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        keepAlive: true
      }
    }
]

    3 上面那2个地方配置好之后其实就已经可以了，接下来你可以试一下是否添加成功

       比如：A组件跳转到B组件，给A组件加上keepAlive:true的配置，并在A组件的钩子函数中打印日志，

       观察从A跳转到B再从B跳转回来的时候，钩子函数有没有打印出日志，同样看看activated和deactivated有没有打印日志

    4 因为keep-alive的特性，所以可以在一些情况下实现返回上一个页面不刷新的功能，只是有的时候单纯使用这个会无效，这个

       时候可以考虑设置scrollTop来配合实现该功能。

三、通过代码手动控制当前组件是否设置keepAlive

可以在beforeRouteEnter(to, from, next)这个函数中去设置，这个函数是在路由进入之前执行的

选择这个函数的原因是：这个函数的from参数中可以拿到路由是从哪个组件过来的，而且在有的钩子函数中执行可能太晚了，当前这次的设置以及无效。如：

beforeRouteEnter(to, from, next){
	// 如果是其他2个tab页切换到首页，则需重新刷新页面，否则缓存不重新加载(如：进入二级页面)
	if(['EventIndex','UserIndex'].includes(from.name)){
		to.meta.keepAlive = false
	} else {
		to.meta.keepAlive = true
	}
	next();
},