項目開發中經常會遇到詳情返回列表，列表默認在點擊詳情的高度的問題，特此總結一下，但願能夠幫到大家

剛剛解了一個詳情返回列表時候，列表高度保持在點擊進去的詳情的問題，特此作個分享，但願你們碰到相似的問題能夠直接一遍過，不用卡殼（由於這個在實際項目開發中常常會用到因此分享了出來）

Vue api 是這樣說的 api連接傳送門

dome是這樣的

通過詳細查看 （話很少說，貼代碼）

---

scrollBehavior (to, from, savedPosition) {
    if(savedPosition) {
        setTimeout(() => {
            window.scrollTo(savedPosition.x, savedPosition.y)
        }, 200)
    }
}

或者結合keep-alive來達到後退時不刷新數據，前進時刷新數據的效果。

new VueRouter({
    mode: 'history',
    routes: [{
        path: '/foo',    
        component: (resolve) => {
            require(['views/foo'], resolve)
        },
        meta: {isKeepAlive: true}
    }],
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition || typeof savedPosition == 'undefined') { //從第二頁返回首頁時savePosition爲undefined
            //只處理設置了路由元信息的組件
            from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : false;
            to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : true;
            if(savedPosition) {
                return savedPosition;
            }
        } else {
            from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : true;
            to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : false;
        }
    }
})


<keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.isKeepAlive"></router-view>

簡單的分享給你們，但願能夠幫到大家