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

目录
相关文章
|
7月前
Vue3随内容增加滚动到底部
Vue3随内容增加滚动到底部
227 0
|
5月前
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
167 1
|
6月前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
40 1
|
5月前
|
JavaScript
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
211 0
|
5月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
385 0
|
JavaScript 定位技术 API
vue加载地图,在tab切换到其他页面再切换回来的时候,地图不显示了
vue加载地图,在tab切换到其他页面再切换回来的时候,地图不显示了
1219 0
|
JavaScript 容器
vue项目切换页面会白屏,刷新之后才会正常显示(已解决)
vue项目切换页面会白屏,刷新之后才会正常显示(已解决)
659 0
|
JavaScript
解决vue路由跳转后页面滚动位置问题
解决vue路由跳转后页面滚动位置问题
121 0
|
JavaScript
vue 里实现文本超出时点击左右按钮滚动?
vue 里实现文本超出时点击左右按钮滚动?
409 0
vue 里实现文本超出时点击左右按钮滚动?
|
前端开发
前端实用案例-借助echarts实现内容自动向上轮播
最近正好在做一个项目,需要做一个内容向上轮播的部分,奈何时间原因手写轮播不敢搞,网上也有一些组件,但是看起来不可靠,因此我得另找出路,最近正好在学echarts,有感而发,不知道能不能解决这个问题,经过查询,发现echarts还真的可以搞,现将我的成果分享出来,以后有相同需求拿来用即可。
1323 1
前端实用案例-借助echarts实现内容自动向上轮播

热门文章

最新文章