vue中使用keep-alive页面滚动条缓存问题

vue中为避免资源的重复请求，一般都会加上keep-alive来对数据进行缓存处理。keep-alive官方传送门。

最近正好在做一个投票，页面之间数据传递用的vuex，想着使用keep-alive可以减少请求优化性能，但是使用keep-alive之后，有个比较尴尬的问题，如下图：

首页

详情

投票页面进入滑动到底部，点击进入详情页之后，滚动条也拖动到了最底部，这肯定不是我们想要的效果，毕竟详情页肯定是从最上面往下面看，于是查了一番度娘，看到有小伙伴说用如下代码：

router.afterEach((to,from,next) => {
     window.scrollTo(0,0)
})

上面这段代码确实解决了，但是带来了新的问题，我返回投票页面页面也返回到了顶部，好吧！这也不是我想要的效果，肯定需要记住用户浏览时的位置啊，拆东墙补西墙的赶脚。于是只能重新找度娘了。

找到了一种比较简单的方法，就是在详情页加上如上代码：

methods: {
    scrollToTop () {
        window.scrollTo(0, 0)
    }
}
activated () {
    this.scrollToTop()
}

每次进入性情也让页面滚动到最顶部，好吧，偷懒好方法解决了基本的问题，还算可以！但是也看到度娘中有小伙伴提到了另外的方法，就是在router路由中进行控制，使用router提供的scrollBehavior方法，scrollBehavior传送门。

下面是一个简单的例子：

routes: [
    {
        path: '/detail/:id',
        component: Detail,
        meta: {
            keepAlive: true
        }
    }
],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition
    }   else {
        if (from.meta.keepAlive) {
            from.meta.savedPosition = document.body.scrollTop;
        }
        return { x: 0, y: to.meta.savedPosition || 0 }
    }
}