keep-alive实现路由缓存
在写一个移动端项目时遇到了一个问题，每一个tab栏所对应的页面被封装成一个组件进行
复用，结果会导致他们共用一个滚动条。解决办法是给这个子组件加固定的高度（例如
height:100vh），同时加一个属性overflow-y:auto，这样就可以解决这个问题。之后发现每当进
入主页中任意一篇文章再退出时，页面重新加载渲染了，之前的文章消失了，所有在这里想到
了路由缓存。
先说一下keep-alive的属性和用法。
Props：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。超出的会进行缓存，最前面缓存的会重新加载。
用法：
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
（只有被<keep-alive>包裹的组件才具有这两个钩子函数）
其实不太建议使用include的，因为如果多个组件中都包括include中匹配到的组件，想单独
的让其中某个组件缓存是不太方便的。所以可以在分发路由时，在需要缓存的路由中把额外标
记的属性写在meta中，如图1。
使用的时候可以在根组件中通过$route.meta.keepAlive取到该值，然后进行v-if判断即可，如图
2，这样使用起来相对灵活一点。
使用keep-alive缓存路由后，已经解决了主要问题，但是有新的问题出现。缓存过的组件重
新被激活时不会记录滚动条的状态，默认置顶，所以应该监听这个被复用的组件的onscroll事
件，动态记录滚动条的位置状态，然后重新赋值给scrollTop（如果还想优化最好给滚动事件来
一个防抖处理）。那么问题来了，应该在何时重新赋值呢？上面用法中提到了当组件在<keep-
alive> 内被切换时会触发activated这个钩子函数，所以应在这里赋值。
