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

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

經常使用的:keep-alive 路由緩存(很少解說)

但上面不少時候,因頁面需求緣由,不能使用這種實現方式,在網上找了不少方法,可是都不是很好用,如今本身實現了一個還算不錯的。vue-router

clipboard.png

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

clipboard.png

咱們能夠使用vuex儲存滾動的位置(因頁面會作接口請求數據,因此要在數據渲染完成後,再進行跳轉)api

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

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

封裝mixin方法,省得每一個頁面都須要寫一次安全

clipboard.png

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

clipboard.png

最後,頁面進行調用spa

clipboard.png

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

clipboard.png

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

相關文章
相關標籤/搜索