【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 列表页到详情,详情回到列表,列表恢复离开时的状态(上)
1108 0
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
2952 0
|
JavaScript
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
|
12月前
|
前端开发
Promise.all()方法的作用是什么?
Promise.all()方法的作用是什么?
808 121
|
11月前
|
存储 数据安全/隐私保护
如何在 Vuex 中使用插件进行状态持久化?
如何在 Vuex 中使用插件进行状态持久化?
1066 122
|
缓存 JavaScript
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
2133 122
|
前端开发 JavaScript
Vue2瀑布流图片展示(Waterfall)
这篇文章介绍了如何在Vue 3框架中实现瀑布流图片展示组件,提供了两种实现方式:一种使用CSS的`column-count`和`column-gap`属性,另一种使用JavaScript计算图片位置,以实现图片在多列中的动态分布。
1201 2
Vue2瀑布流图片展示(Waterfall)
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
1743 0

热门文章

最新文章