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

fruge365

已于 2023-09-26 15:59:05 修改

阅读量717

点赞数

文章标签：前端 javascript 开发语言

于 2023-09-26 14:47:03 首次发布

本文链接：https://blog.csdn.net/qq_46123200/article/details/133309534

版权

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