这几天写一个 vue 个人项目，为了提升用户体验需要使用 keep-alive 内置组件来缓存一下用户在上个组件(页面)停留的地方，在用户回到这个组件(页面)时能够看到内容还是停留在刚刚的地方。
首先我将展示四个组件的视口用 keep-alive 标签包裹，并且设置了缓存组件个数最大值，这样就实现了首页组件的基本缓存：
<keep-alive :max="4">
<router-view />
</keep-alive>
但是因为首页组件中也存在更多需要缓存的子组件，并且数量还比较的多，所以采用了有多少个数据就渲染多少个子组件这样的创建组件模式，在用户没有切换到一个新子组件前，组件都不会被渲染，一旦切换了新子组件，旧子组件的内容也会被缓存，用户在从新旧子组件切换时就不会重新加载数据，这样就实现了首页中子组件的缓存。
<van-tab
v-for="item in channelList"
:key="item.id"
:title="item.name"
>
<!-- 文章列表组件 -->
<ArticleList :channel="item" />
</van-tab>
其中为了因为一些子组件内容不多所以撑不开高度，所以缓存不到用户在旧子组件停留的 scrollTop ，针对这种情况可以用 vh 这个移动端单位处理。
.article-list {
/* 视口（在移动端是布局视口）单位：vw 和 vh，不受父元素影响 */
/* 1vw = 视口宽度的百分之一 */
/* 1vh = 视口高度的百分之一 */
height: 79vh;
overflow-y: auto;
}
最后将最外面的 router-view 视口用 keep-alive 标签包裹并设置最大值，这样做的话用户在四个大组件任意地方停留，然后跳去其他组件再回来时，还是会在原来停留的地方继续浏览，大大提高了用户体验。
<keep-alive :max="2">
<router-view/>
</keep-alive>
但是目前出现一个问题，就是在最外面设置 keep-alive 的话，用户切换登录状态后，回来组件还是停留在上次登录状态所停留的地方，非常不合理，所以接下来需要解决这个bug：
我向 localStorage 存储了一个监听登录状态的变量，如果为登录状态就设置为 'login' 如果为未登录状态就设置为 'logout'，暂时将该变量命名为 activatedFlag 。同理的，我在 vuex 的实例中也这样储存了这样一个变量，命名为 deactivatedFlag，都是用 token 来进行判断的。
activatedFlag 用于保存当前登录状态, deactivatedFlag 用于保存上一个登录状态，在当切换登录状态回来激活组件时，如果两者不相同就让组件在激活时进行刷新(滚回顶部)，如果两者相同，说明用户并没有进行登录状态切换，则就不需要进行刷新操作。
以上就是我的项目中的一些问题解决方案，写得不好多多包涵。
