关于vue-router切换滚动条自动置顶的一点记录

最新推荐文章于 2024-07-21 13:23:50 发布
最新推荐文章于 2024-07-21 13:23:50 发布
阅读量2.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoteman4wo45/article/details/80412329
版权
在开发Vue单页面应用时，遇到页面切换回主页滚动条自动置顶的问题，影响用户体验。尝试了vue-router的scrollBehavior方法和keep-alive缓存策略。scrollBehavior可以自定义滚动行为，但未解决问题。而keep-alive可以缓存页面，但针对滚动条位于子元素的情况无效。解决方案是通过ref获取子元素，保存滚动位置，结合router.push和路由守卫，动态调整scrollTop，确保返回时能恢复到之前的位置。
摘要由CSDN通过智能技术生成

    现在在写一个单页面的项目，但是遇到了一个问题，就是每次切换回主页滚动条自动置顶，

由于是首页->详情页，这样的页面切换方式，每次切换回来就自动置顶带来的体验非常不好，需要解决这个问题

    查了一些资料，有vue-router官方自己的滚动方法，还有一个就是keep-alive缓存。

    首先是官方的方法，

     scrollBehavior (to, from, savedPosition) {

// return 期望滚动到哪个的位置

}

    然后是keep-alive，它可以将切换过的页面缓

最低0.47元/天 解锁文章
aoteman4wo45
关注
vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
猿小白的博客
02-06 7321
使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。 下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..
新手小白VUE整理(9)——vue-router,编程式导航,滚动定位
a35336000的博客
11-02 499
vue-router,编程式导航,滚动定位
vue elementUI中 el-table 如何在切换页码让滚动条回到顶部或底部
最新发布
weixin_58586234的博客
07-21 962
使用el-table显示数据，当滚动到最底部，再点击切换分页时，回显过来数据后，滚动条依然在页面底部。
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法(HTML5 history 模式下可用)
拥抱城市的你
04-17 1458
有时候我们需要页面滚动条滚动到某一固定的位置，一般使用Window scrollTo() 方法。 语法：scrollTo(xpos,ypos) xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。 例如滚动内容的坐标位置100,500： window.scrollTo(100,500); 好了，这个scrollTop这儿...
vue的路由滚动 切换路由之后滚动条在最上面
m0_64415782的博客
07-26 1333
如果你想自定义路由切换时的滚动行为，可以在路由配置中使用scrollBehavior函数。这个函数接收三个参数：to（目标路由对象），from（来源路由对象）和savedPosition（之前的滚动位置）。你可以根据这些参数来自定义滚动行为。在Vue中，你可以通过路由滚动行为来控制页面切换时滚动条的位置。默认情况下，Vue Router会将滚动条的位置重置为顶部。
vue 切换路由页面时，滚动条滚动到最上面
xingchen678的博客
01-18 4400
vue项目里，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。可以在路由的导航守卫afterEach里面添加：window.scrollTo(0,0);scrollBehavior: () => ({ y: 0 }), //滚动到顶端。mode: ‘history 或 hash’,第三种方法： （本人用得方法）
vue中router-link配合router-view实现页面切换控制滚动条位置变化-案例
JackieDYH的博客
01-22 1378
页面切换不改变浏览器滚动条位置 路由表配置router { path: "/introduce", name: "introduce", meta: { title: "路由滚动条" }, component: () => import("../views/introduce.vue"), children: [ { path: '/introduce/property', meta: { .
vue2.0路由切换后页面滚动位置不变BUG的解决方法
08-27
Vue 2.0 路由切换后页面滚动位置不变 BUG 的解决方法 在 Vue 2.0 项目中，路由切换后页面滚动位置不变是一个常见的问题。这是因为 Vue 的路由机制会将页面滚动到顶部，而不是保持之前的滚动位置。下面我们将讨论这...
解决vue项目不明原因滚动条被记录，而我不需要这个功能，怎么取消的问题
程序员张礼奎的博客
07-29 2048
操碎了心，直接在Router里面配置每次router跳转都把滚动条置顶或者滚滚滚滚滚到你想要的位置 这个代码来源于Vue官方提供的srollBehavior方法 //解决滚动条被记住的问题 scrollBehavior(to, from, savedPssition){ if(savedPssition){ return savedPssition; }else{ ...
vue element - ui 项目， scrollbar模块，切换页面不置顶
Shimeng_1989的博客
10-24 1169
我们项目为vue项目，整个html是分为三个区域 上、下、（下面部分包含：）左、右。 问题为：点击左侧菜单，切换路由，（新页面）右侧内容区域为当前scrolltop高度，未置顶（未从顶部显示）。 解决方法： 1、先检查路由文件是否添加 下段代码（此段代码是将整个页面（html）置顶显示，而我们项目是分为上下两块div，上部分为20%，下面高度为80%，下部分又分为左右两部份，左侧围...
解决vue中路由跳转时，让滚动条显示在顶部
qq_56989560的博客
04-30 2675
解决vue中页面跳转，显示在顶部
VUE 实现滚动监听 导航栏置顶的方法
10-18
今天小编就为大家分享一篇VUE 实现滚动监听 导航栏置顶的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
vue项目中在使用vue-router切换页面的时候滚动条怎样自动滚动到顶部？
weixin_42727360的博客
07-03 405
完整代码例子： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const Home = { template: '<div>home</div>' } const Foo = { template: '<div>foo</div>' } co...
解决vue2路由切换后滚动条停留在上个页面的位置问题
m0_52685922的博客
10-10 926
【代码】解决vue2路由切换后滚动条停留在上个页面的位置问题。
Vue 返回记住滚动条位置详解
weixin_34380296的博客
03-04 2852
最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。 这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。 于是在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有通过看一篇文章而完美解决，所以决定写一篇详细的亲测可行的解决方案。 一共分三步： 给 router-v...
实现点击置顶功能（以vue为例）
qq_33247427的博客
05-07 306
【代码】实现点击置顶功能（以vue为例）
吸顶和一键置顶
weixin_44412921的博客
02-21 804
吸顶和一键置顶 思路 ####### div初始普通文档流中，给window添加scroll事件，获取div到其上级层顶部的距离，滚动时滚动产生的y轴距离和div到其上级层顶部的距离比较，当到达div到其上级层顶部的距离时给div添加一个fixed的class使其固定，向上滚动时到达div初始div到其上级层顶部的距离时则删除fixed的calss，此时div又回到普通文档流中 *{margin...
Vue.js教程：vue-router入门与实践
"Vue.js系列教程的第三部分专注于vue-router，讨论如何在Vue.js 2.0项目中集成和使用vue-router 2.0。作者强调了版本的重要性，因为不同版本可能有不同的特性和使用方法。文章是作者一系列Vue.js文章的一部分，前两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值