解決vue-router跳轉頁面,返回上一頁跳回指定位置

項目要求(商品列表):pageA -> pageB -> pageA

常用的:keep-alive 路由緩存(不多解說)

但上面很多時候,因頁面需求原因,不能使用這種實現方式,在網上找了很多方法,但是都不是很好用,現在自己實現了一個還算不錯的。

clipboard.png

首先,在vue-router中,scrollBehavior這個方法是可以打印訪問過的頁面,滾動的位置的。【注意:在刷新頁面時,不會觸發該事件】

clipboard.png

我們可以使用vuex儲存滾動的位置(因頁面會做接口請求數據,所以要在數據渲染完成後,再進行跳轉)

store.commit('SET_ROUTER_POSITION', savedPosition || {})

好。我們獲取到滾動的位置並且儲存後,我們在需要在指定頁面進行頁面渲染後,調用滾動事件。

封裝mixin方法,免得每個頁面都需要寫一次

clipboard.png

再封裝頁面滾動事件,延時300毫秒是爲了安全起見,怕移動端有兼容,所以先加上

clipboard.png

最後,頁面進行調用

clipboard.png

可在接口請求回來數據後,進行調用。這樣處理網絡過慢問題

clipboard.png

完成解決這麼久以來的困惑,如有幫助加個收藏

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章