vue-router的保留滾動距離無效？

keep-alive是會緩存原來頁面的狀態(tài)的，2.0好像新增了include和exclude,看看是不是兼容性問題

因為是下拉加載更多列表,需要監(jiān)聽的是包裹滾動列表外部div(wrapper)的滾動.
在A操作到B的時候用vuex來記錄滾動的狀態(tài),B回到A頁面重新設置wrapper的scrollTop為vuex記錄的狀態(tài)就可以了.

提供兩種解決方案：
1.路由如果使用的是hash方式，手動記錄滾動位置，可以是window或者有滾動條的DOM元素。

具體方法如下：  

// vue-router做如下配置
const router = new VueRouter({
    routes: routes,
    mode: 'hash'
});
// 在vue頁面處理如下：
    // data初始化的時候默認滾動距離為0
    scroll: 0,
    
    // mounted中綁定滾動事件
    mounted() {
        ElementScroll.addEventListener('scroll', this.handleScroll);
    }
    
    // methods中
    // 內(nèi)部元素滾動
    handleScrollInner() {
        this.scrollInner = this.fixedElementScrollInner.scrollTop || 0;
    },
    // window滾動
    handleScroll() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
    }
    
    // 激活keep-alive的時候，執(zhí)行activated鉤子回調(diào)
    activated() {
        if (this.isSticky) {
            window.scrollTo(0, this.scroll);
            window.addEventListener('scroll', this.handleScroll);
        } else {
            if (this.$refs.oldPullDown) {
                this.fixedElementScroll.scrollTop = this.scroll;
                this.fixedElementScroll.addEventListener('scroll', this.handleScroll);
            }
        }
        this.scroll = 0;
    },
    // 離開的時候，執(zhí)行deactivated鉤子，刪除監(jiān)聽事件
    deactivated() {
        window.removeEventListener('scroll', this.handleScroll);
        if (this.$refs.oldPullDown) {
            this.fixedElementScroll.removeEventListener('scroll', this.handleScroll);
        }
    }
    

2.通過vue提供的history路由模式實現(xiàn)，這種方式簡單，但是需要后端配合，對于已有項目來說，修改起來不方便。

// vue-router升級到最新版本2.7
const router = new VueRouter({
  mode: 'history',
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
  }
})

// 詳情請看官方文檔：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8

正常來說keep-alive會保持位置的，之前我項目中用keep-alive的時候遇到的問題是有的頁面返回可以保持，有的不可以保持，也沒定位到什么原因。后來沒辦法就每次離開記錄位置，然后自己滾動到指定位置。