vue中為避免資源的重復(fù)請求，一般都會加上keep-alive來對數(shù)據(jù)進(jìn)行緩存處理。keep-alive官方傳送門。

最近正好在做一個投票，頁面之間數(shù)據(jù)傳遞用的vuex，想著使用keep-alive可以減少請求優(yōu)化性能，但是使用keep-alive之后，有個比較尷尬的問題，如下圖：

首頁

詳情

投票頁面進(jìn)入滑動到底部，點(diǎn)擊進(jìn)入詳情頁之后，滾動條也拖動到了最底部，這肯定不是我們想要的效果，畢竟詳情頁肯定是從最上面往下面看，于是查了一番度娘，看到有小伙伴說用如下代碼：

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

上面這段代碼確實(shí)解決了，但是帶來了新的問題，我返回投票頁面頁面也返回到了頂部，好吧！這也不是我想要的效果，肯定需要記住用戶瀏覽時的位置啊，拆東墻補(bǔ)西墻的趕腳。于是只能重新找度娘了。

找到了一種比較簡單的方法，就是在詳情頁加上如上代碼：

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

每次進(jìn)入性情也讓頁面滾動到最頂部，好吧，偷懶好方法解決了基本的問題，還算可以！但是也看到度娘中有小伙伴提到了另外的方法，就是在router路由中進(jìn)行控制，使用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 }
    }
}