項目要求(商品列表):pageA -> pageB -> pageA
常用的:keep-alive 路由緩存(不多解說)
但上面很多時候,因頁面需求原因,不能使用這種實現方式,在網上找了很多方法,但是都不是很好用,現在自己實現了一個還算不錯的。
首先,在vue-router中,scrollBehavior
這個方法是可以打印訪問過的頁面,滾動的位置的。【注意:在刷新頁面時,不會觸發該事件】
我們可以使用vuex儲存滾動的位置(因頁面會做接口請求數據,所以要在數據渲染完成後,再進行跳轉)
store.commit('SET_ROUTER_POSITION', savedPosition || {})
好。我們獲取到滾動的位置並且儲存後,我們在需要在指定頁面進行頁面渲染後,調用滾動事件。
封裝mixin方法,免得每個頁面都需要寫一次
再封裝頁面滾動事件,延時300毫秒是爲了安全起見,怕移動端有兼容,所以先加上
最後,頁面進行調用
可在接口請求回來數據後,進行調用。這樣處理網絡過慢問題
完成解決這麼久以來的困惑,如有幫助加個收藏