項(xiàng)目結(jié)束罚屋，測試時(shí)發(fā)現(xiàn)在首頁商品列表中鸡捐，向上滑動幾頁后點(diǎn)擊進(jìn)入詳情，從詳情頁面返回商品列表時(shí)户辫，頁面回到了最頂部，測試不通過說是用戶體驗(yàn)不好嗤锉，要求從哪里點(diǎn)擊進(jìn)去返回該頁面時(shí)回到原先的滾動頁面渔欢。
思路：因?yàn)関ue是單頁面應(yīng)用，進(jìn)入其他頁面時(shí)會銷毀該頁面瘟忱，用keep-alive不讓其刷新奥额，具體實(shí)現(xiàn)為：
(1).在App.vue中加入：
<template>
<div id="app">
<!--<router-view/>-->
<!--頁面返回不刷新-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
(2).index.js頁面
export default new Router({
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: true
}
},
這樣在index.vue中苫幢，mounted方發(fā)只走一次，在瀏覽器上實(shí)現(xiàn)了返回原來滾動位置的目的垫挨。但是在手機(jī)上測試韩肝，發(fā)現(xiàn)沒用，
解決手機(jī)上實(shí)現(xiàn)目的的方法：
//在頁面離開時(shí)記錄滾動位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//進(jìn)入該頁面時(shí)九榔，用之前保存的滾動位置賦值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},
OK哀峻！實(shí)現(xiàn)！哲泊！
