【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切换页面之后滚动条停留在上个页面的位置,解决方案

目录
打赏
0
6
6
1
14
分享
相关文章
window.scrollTop 不生效的原因,如何解决
window.scrollTop 不生效的原因,如何解决
648 0
el-upload 点击一次,出来两个选择文件框的解决方案
el-upload 点击一次,出来两个选择文件框的解决方案
533 0
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
4166 0
Element的el-table行列错位对不齐问题处理
|
10月前
|
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
334 2
|
8月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
621 0
keep-alive 组件有哪些常用的属性和配置选项
keep-alive 组件有哪些常用的属性和配置选项
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
383 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等