vue记录滚动条位置

平时维护几个vue搭建的后台管理项目，最近接到一个需求，每个页面都需要记录自己独立的滚动条位置，互相切换不影响，网上查了很多资料，都不是很好，所以就自己想办法解决了。

刚开始解决办法是利用keep-alive,每个页面不销毁，利用activated、deactivated2个生命周期，切换路由的时候记录位置，进入页面的时候滚动到指定位置，新开页面滚动到顶部，但这样解决办法比较麻烦需要修改所有页面所以优化了一下

代码如下

在路由的beforeEach钩子函数里面记录即将退出的路由名称和高度，记录在vuex里面

import store from '@/store'
router.beforeEach((to, from, next) => {
	//其他逻辑省略
	
	store.commit('setscroll', {
      from: from,
      scrollTop: document.getElementById('box_main').scrollTop
    })
})

在vuex里面mutations里面写保存滚动条高度和滚动到指定位置

['setscroll'](state, data) {
        // 记录滚动条
        for(let item of state.scrollList){
            if(item.name==data.from.name){
                item.scrollNum = data.scrollTop;
                return;
            }
        }
        
        state.scrollList.push({
            name:data.from.name,
            scrollNum:data.scrollTop
        })
    },
   ['goscroll'](state, data) {
       // 滚动位置
       for(let item of state.scrollList){
           if(item.name == data.name){
               document.getElementById('box_main').scrollTop = item.scrollNum;
               return;
           }
       }
       //判断页面是否已经渲染
       if(document.getElementById('box_main')){
           document.getElementById('box_main').scrollTop = 0;
       }
       
   },

在路由的scrollBehavior函数里面调用vuex的方法

new Router({
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 进入页面判断滚动条
    store.commit('goscroll', to);
  }
})

整体思路

• 切换路由的时候记录当前页面的滚动位置,记录在vuex里面
• 在进入页面的时候判断当前页面是否已经打开过并且在keep-alive里面缓存住了，如果存在记录就滚动到指定位置否则滚动到顶部

效果还是可以，思路有很多种，这种比较简单，只需要修改route和vuex 2个地方就可以实现