vue中為避免資源的重復(fù)請(qǐng)求逊谋，一般都會(huì)加上keep-alive來(lái)對(duì)數(shù)據(jù)進(jìn)行緩存處理取刃。keep-alive官方傳送門(mén)吧彪。
最近正好在做一個(gè)投票待侵，頁(yè)面之間數(shù)據(jù)傳遞用的vuex，想著使用keep-alive可以減少請(qǐng)求優(yōu)化性能姨裸，但是使用keep-alive之后秧倾，有個(gè)比較尷尬的問(wèn)題怨酝，如下圖：
首頁(yè)
詳情
投票頁(yè)面進(jìn)入滑動(dòng)到底部，點(diǎn)擊進(jìn)入詳情頁(yè)之后那先，滾動(dòng)條也拖動(dòng)到了最底部农猬，這肯定不是我們想要的效果，畢竟詳情頁(yè)肯定是從最上面往下面看售淡，于是查了一番度娘斤葱，看到有小伙伴說(shuō)用如下代碼：
router.afterEach((to,from,next) => {
window.scrollTo(0,0)
})
上面這段代碼確實(shí)解決了，但是帶來(lái)了新的問(wèn)題揖闸，我返回投票頁(yè)面頁(yè)面也返回到了頂部揍堕，好吧！這也不是我想要的效果汤纸，肯定需要記住用戶瀏覽時(shí)的位置啊衩茸，拆東墻補(bǔ)西墻的趕腳。于是只能重新找度娘了贮泞。
找到了一種比較簡(jiǎn)單的方法递瑰，就是在詳情頁(yè)加上如上代碼：
methods: {
scrollToTop () {
window.scrollTo(0, 0)
}
}
activated () {
this.scrollToTop()
}
每次進(jìn)入性情也讓頁(yè)面滾動(dòng)到最頂部，好吧隙畜，偷懶好方法解決了基本的問(wèn)題，還算可以说贝！但是也看到度娘中有小伙伴提到了另外的方法议惰，就是在router路由中進(jìn)行控制，使用router提供的scrollBehavior方法乡恕，scrollBehavior傳送門(mén)言询。
下面是一個(gè)簡(jiǎn)單的例子：
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 }
}
}
