平时维护几个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个地方就可以实现