【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案

简介: 【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案

最近在写vue2 项目时跳转页面后滚动条的位置居然没变,就是原页面滚动条什么位置跳转后还在什么位置。正常来说跳转页面滚动条应回到顶部。百度找到解决方法之后将自己的经验总结下来

history 路由解决方法

在router/index.js中修改

const router = new Router({
    mode: "history",
    routes: routes,
  //增加这个配置
    scrollBehavior(to, from, savedPosition) {
        console.log(savedPosition)
        if(savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }
});

其他路由hash遇到会完善文章


参考文章:vue2切换页面之后滚动条停留在上个页面的位置,解决方案

目录
相关文章
|
缓存
vue3-ts:keepalive 列表页到详情,详情回到列表,列表恢复离开时的状态(上)
vue3-ts:keepalive 列表页到详情,详情回到列表,列表恢复离开时的状态(上)
1152 0
|
JavaScript
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
3009 0
|
存储 数据安全/隐私保护
如何在 Vuex 中使用插件进行状态持久化?
如何在 Vuex 中使用插件进行状态持久化?
1122 122
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
2208 0
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
909 0
|
人工智能 JavaScript 前端开发
js删除对象属性
本文介绍了JavaScript中删除对象属性及数组元素的多种方法,包括设置属性为undefined、使用delete操作符、对象解构、Reflect.deleteProperty方法以及数组的delete和splice操作。每种方法均有示例代码及关键特性说明,适用于不同场景下的属性或元素删除需求,帮助开发者更高效地处理对象和数组的操作。
556 0
js删除对象属性
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29409 154
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
5358 0