vue单页路由跳转后scrollTop问题

最新推荐文章于 2024-08-08 08:27:20 发布
最新推荐文章于 2024-08-08 08:27:20 发布
阅读量6.2k 收藏 3
点赞数 1
分类专栏： vue学习 文章标签： vue单页开发 路由跳转页面滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leileibrother/article/details/78852376
版权
在Vue单页开发中，遇到路由跳转时页面保持之前滚动位置的问题。最初通过在每个页面设置window.scrollTop解决，但这种方法不够优雅。最终在main.js中使用scrollBehavior进行处理，实现更友好的路由跳转体验。
摘要由CSDN通过智能技术生成

作为vue的初级使用者，在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题，当一个页面滚动了，点击页面上的路由调到下一个页面时，跳转后的页面也是滚动的，滚动条并不是在页面的顶部。

最开始我使用了一个很笨的方法，每个页面上都加上window.scrollTop(0,0);来解决问题，但是这个太繁琐了。最后和小伙伴们商量了一下，在main.js页面上加了这么一段代码

router.afterEach(function (to) {
  window.scrollTo(0, 0)
})

路由跳转后就不会出现滚动的问题了。

但是这种做法是不友好的，我们可以使用scrollBehavior (to,

最低0.47元/天 解锁文章
小雷雷哥哥
关注
专栏目录
Vue路由切换后, 页面滚动位置不变BUG处理
weixin_46317118的博客
04-09 1311
问题描述: 在路由a的时候，滚动页面到x的位置，此时直接跳转路由b，会发现b页面竟然页停留在x的位置！ 图示如下: 解决方案①:监听路由 直接在app.vue监测路由变化, 让body的滚动距离scrollTop=0/ scrollTo(0,0) export default { watch: { $route: function(to, from) { window.sc...
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，
滚动行为
A13330069275的博客
07-19 316
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在支持 history.pushState 的浏览器中可用。 当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法： const router = new Vue...
Vue-ScrollTo 使用教程
最新发布
gitblog_00662的博客
08-08 717
Vue-ScrollTo 使用教程 vue-scrolltoAdds a directive that listens for click events and scrolls to elements.项目地址:https://gitcode.com/gh_mirrors/vu/vue-scrollto 项目介绍 Vue-ScrollTo 是一个用于 Vue.js 的页面定位滚动插件，它允许开发...
vue项目中scrollTop如何使用
MISS_zhang_0110的博客
06-16 4297
vue项目中scrollTop如何使用1. router.js路由配置2.enterpriseList.vue配置 需求：企业列表-----企业详情，当我再返回企业列表，还在第一次滑动的位置 1. router.js路由配置 { path: '/enterpriseList', name: 'enterpriseList', component: () => import('./company/enterpriseList.vue'), meta: {
vue中滚到页面最底部scrollTop不生效，解决
michael1991117的博客
06-02 2373
1.滚动的div必须是父级，2.父级需要设置overflow：auto和高度，3.子级高度比父级高度高。
解决vue-router切换路由时没有自定滚动到顶部
weixin_39905130的博客
08-17 1233
在做vue项目时，发现一个问题，通过vue-router切换页面时，如果从一个页面的底部切换到新页面，新开的页面初始也会在底部。 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 export default new Router({ routes, s...
解决vue单页路由跳转后scrollTop的问题
10-18
本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以...
vue路由切换后数据及滚动条保持不变
07-06 979
场景 Vue移动端单页面应用,首页→列表(刷新)→详情,详情→列表(不刷新)→首页. 思路 利用<keep-alive>缓存列表页实例,通过列表页的beforeRouteLeave导航守卫存储参数isRefresh到localStorage,从而在每一次进入列表页组件的active生命周期依据isRefresh进行刷新或滚动条scrollTop设置. keep-alive <keep-alive>可以缓存其包裹的动态组件实例,但它本身只是一个抽象组件,并不会在页面渲染,props
vue 中监听并设置scrollTop
HelloMy_sun的博客
04-02 4351
vue 中监听并设置scrollTop 问题描述： 目前在做一个项目，父子组件以及兄弟组件中数据调用比较频繁。但是鉴于项目没那么大，就没有使用vuex。直接使用了this.$emit来给父级组件传递参数以及触发事件. 但是，由于业务需求， 我的项目当前子组件修改数据的同时是可以将父级组件中的数据同步修改的。然后，子组件再来获取到父组件传递过来数据。就导致了子组件数据在有滚动条的情况下，更新了最新的数据到父级组件之后。子组件的数据也再次刷新，从而引起我子组件页面的滚动条位置也刷新，scrollTop
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
VUE 通过ref 控制滚动条到底部&顶部
u013095204的博客
11-21 4652
开发业务中需要通过按钮点击增加输入栏，当过多时，新增的输入栏在最底部，这时直接控制滚动到底部可省去用户操作。
offsetLeft，offsetTop，scrollLeft，scrollTop
y_mo的专栏
12-25 1196
对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解 Posted on 2006-11-20 16:15 X-阿土 阅读(252) 评论(0)  编辑  收藏 所属分类: JavaScript开发 <!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
vue组件获取 scrollTop焦点 和设置scrollTop 来保存组件的数据和滚动位置
YanLong_Lin的博客
06-16 4200
我的项目中使用了vue和 vant 其中封装的组件有点多，先要的效果就是 缓存list数据并且下拉数据时候 当 点击item项目时候 按回退时候 滚轮还是在原来位置 其中 数据缓存不在这里说了使用的是 上代码 这是封装的组件内部是什么不重要 主要是ref=“articleListBox” <template> <div class="article-list" ref="articleListBox"> <van-pull-refresh v-model="refr
vue实现页面回到顶部，再也不用手动滑啦
热门推荐
Shids_的博客
09-04 1万+
一分钟教你如何优雅的用代码实现一键回到顶部
vue设置整个页面回到顶部和局部div回到顶部
小元子
04-20 1685
方法二：一个页面里面某个盒子局部滚动回到顶部。方法一：在整个页面滚动的情况下可以这样设置。方法一：在整个页面滚动的情况下可以这样设置。
vue 单页面路由跳转
06-02
要在 Vue 单页面应用中进行路由跳转，需要使用 Vue Router 对象。以下是一些基本的路由跳转方法： 1. 使用 router-link 组件进行路由跳转： ``` <router-link to="/path">Link Text</router-link> ``` 2. 使用 router 对象进行编程式路由跳转： ``` this.$router.push('/path') ``` 3. 使用命名路由进行编程式路由跳转： ``` this.$router.push({ name: 'routeName' }) ``` 注意：在上述代码中，需要将 `/path` 替换为实际的路由路径，将 `routeName` 替换为实际的命名路由名称。同时，在使用编程式路由跳转时，需要保证当前组件已经被路由加载。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值