vue-router3.0处理页面滚动部分源码分析

最新推荐文章于 2024-08-23 18:20:21 发布
最新推荐文章于 2024-08-23 18:20:21 发布
阅读量746 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/song_de/article/details/130110623
版权
文章详细探讨了Vue-Router3.0中处理路由切换时保持滚动位置的实现。通过对setupScroll、handlePopState、saveScrollPosition、handleScroll和scrollToPosition等关键方法的分析，揭示了如何在路由变化时记住并恢复滚动位置。同时，提到了对于兼容性和特殊情况的处理策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

在使用vue-router3.0时候，会发现不同的路由之间来回切换，会滚动到上次浏览的位置，今天就来看看这部分的vue-router中的源码实现。

无论是基于hash还是history的路由切换，都对滚动进行了处理，这里分析其中一种即可。

无论是初始化，或者push，replace都对滚动进行了相应的处理。

下面我们详细看一下这个scroll.js

一、setupScroll

简单介绍下，getStateKey和setStateKey是用来生成和更新history state对应的key，用来存储在positionStore中。

extend方法实现一个简单的对象深度拷贝。positionStore用来存储不同路由对应的滚动位置。

为阻止popstate事件触发浏览器的默认行为，将history.scrollRestoration设置为manual手动控制。为防止用户覆盖history state将history state进行拷贝，注册popstate事件，将移除popstate的方法return出去，在调用处做统一处理。

二、handlePopState

该方法调用保存滚动位置方法，以生成的时间串作为key值。

三、saveScrollPosition

四、handleScroll

该方法会在相应的router变化中被调用，接收四个参数，前三个都已经相当熟悉了，isPop显式的声明是否触发了popstate change，没有触发就不进行滚动的操作。assert处理，如果没有scrollBehavior滚动行为函数，在非生产环境就将错误信息写入控制台。

在re-render完成之后进行滚动，判断shouldScroll是否有then方法，不同情况获取shouldScroll参数不同，之后执行scrollToPosition方法。

五、scrollToPosition

在这里先对传进来的selector进行解析，这里作者的注释很有意思，类似#main[data-attr]的id选择器依然会失败，但是都用了id选择器，再加属性貌似也没啥道理，但是底下的代码对这种情况依然进行的兼容处理。

底下一堆工具方法都是为了根据该selector计算出滚动的位置。

这里用到pageXOffset是有一个小的兼容问题，如下

最后获取到position调用window.scrollTo方法进行滚动。该工具方法会在相对应的路由动作中进行调用，isPop显式的控制是否滚动，

从而实现不同路由记住滚动位置的效果。

-- END --

song_de
关注
仿写网易云音乐Demo项目（Vue3+Vite+Vuex+Vue-Router4.0）
weixin_46092744的博客
09-07 1422
vue3.0全家桶（组合式API）vuex➕（持久化数据存储）开发与构建工具Vite（极速的开发服务器启动）坚守前端MVVM的设计理念，遵循组件化、模块化的编程思想这个Demo是自己手把手撸出来的，算是比较粗糙，比如说代码规划还有代码风格可能不太好；功能也不是很全，还有比如Home页面中可以多个类似的组件可以做利用插槽进行代码优化，如果后面有时间的话可能会一点点去完善，毕竟学习不会止步。💪💪。
vue3 迫不得已我硬着头皮查看了keepalive的源代码，解决了线上的问题
www_xuhss_com的博客
05-31 3023
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 1、通过本文可以了解到vue3 keepalive功能 2、通过本文可以了解到vue3 keepalive使用场景 3、通过本文可以学习到vue3 keepalive
vue3前端开发-小兔鲜项目-路由滚动行为的设置
yrldjsbk的博客
07-23 236
vue3前端开发-小兔鲜项目-路由滚动行为的设置！说白了，就是想让实现一种效果。当我们的路由发生变化时，我们希望看见滚动条能自动恢复到初始的位置（也就是顶部的位置）。官方提供好一个自定义的代码块。我们拿来用一下就行了。如图，我们新增了一个，路由滚动自定义行为的代码块。这个比较简单，我们不再演示了。大家可以自己试试看。里面返回一个对象，对象有一个属性叫top:0。值为0，即意味着距离顶部的像素为0像素。
Vue3——区域内无限滚动
qq812457115的博客
10-31 1130
【代码】Vue3——区域内无限滚动。
vue路由跳转页面后滚动到指定位置
Mitin_的博客
05-10 1012
注意：我在使用的时候，把ref放在了一个带有display：none的元素上，导致路由跳转后并没有跳转到我指定的位置，找了好一会发现ref写错了位置，注意不要写到带有display：none的元素上！需求：首页有一个评论内容对应着某个商品，点击该评论跳转到商品详情页，并且跳转到商品详情的评论处。不要忘记在对应的元素上加上ref属性哦。
vue3路由跳转后页面显示在上个页面滚动到的位置
Ama_Lee的博客
04-01 3651
问题描述 vue3路由跳转后页面显示在上个页面滚动到的位置 原因 vue中的路由跳转是不同组件的显示，尤其是我们在一个公共框架组件下的子组件，很有可能会存在页面显示位置有记忆的问题，vue-router官方文档给出了解决方案，链接如下： https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html 解决方案 在创建路由实例的时候添加scrollBehavior（滚动行为）函数，其接受三个参数，to和from路由对象以及savePositio
vue3中实现某块内容循环滚动
m0_46562963的博客
02-28 506
npm install vue3-seamless-scroll --save
19 道高频 vue 面试题解答（下）
bb_xiaxia1998的博客
10-10 700
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
2025 年 Vue 生态工具组合
最新发布
阿超的博客
08-23 1077
经过 10 年的演进，Vue 已经构建了一个极为丰富且强大的生态系统，本文就来盘点 2024 年 Vue 生态工具组合！
vue学习笔记（超详细）
jiey0407的博客
03-09 6053
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
vue3完成可滚动区域自动滚动展示，原来这么简单！
申小兮和林小兮的博客宝
06-20 1107
vue3完成可滚动区域自动滚动展示，原来这么简单！
vue路由跳转页面滚动到顶部
qq_45723621的博客
10-14 2406
注意: 这个功能只在支持 history.pushState 的浏览器中可用。今日一句： 遇见问题不要慌抽根烟，看官网。
使用vue-router时，根据需求选择路由跳转或新窗口打开，ctrl和滚轮点击不影响
weixin_45932460的博客
10-21 570
运用场景 当在使用vue-router搭建导航时，既想局部渲染对应模块又不能舍弃Ctrl点击、滚轮单击打开新窗口功能，可以参考以下代码 兼容性 360浏览器、谷歌都可正常跳转 HTML 设置a标签点击事件，并且传入evert参数 <div> <a :href="link" @click="NavOn($event, link)"> {{ name }} </a> </div
Vue 实现全屏滚动效果
qq_39085895的博客
12-20 1449
Vue 实现全屏滚动效果
vue3.0点击事件之scrollTo滚动
一句话介绍不了
12-02 3792
具体语法及注释如下 <template> <div> <!-- @ == v-on 事件类型为click scroll为自己定义的事件名字 --> <button @click="scroll">按钮</button> </div> </template> <script> export default { name: "yanshi", methods: { // 没
利用vue-router滚动行为与vue KeepAlive组件实现页面缓存
Lyh18827761202的博客
04-29 1073
相信很多小伙伴在写商城类项目时都会遇到的问题：当我进入商品（或其他东西）的详情页，需要返回原先页面，发现原先页面刷新回到顶部了，并没有返回到原先的位置，这种体验感是非常差的！下面我来利用vue-router滚动行为与vue KeepAlive组件实现页面缓存。
vue3 监听属性
码农的专栏
07-16 947
代码】vue3监听属性。
vue3从认识到使用
weixin_52507918的博客
03-12 692
/ 首先在vue3中引入ref//使用ref定义变量// 改变赋值console.log(value1.value,'变量的值')});// 引入reactive// 定义变量并赋值arrTwo:[num:100,text:'你好'});// 改变赋值num:200,text:'改变了'console.log(arr, "当前变量值");}),在vue3的setup语法糠中methods方法可以直接定义使用。
保持页面中滚动条的位置，使得页面提交后滚动条还是在原来的位置
rickjelly2004的天空
08-24 2195
一般来说很多的人在控制浏览器滚动条都是用Page.SmartNavigation = False，对于页面中DIV等等的滚动条控制，我在看了别人代码后，写了一个，仅供参考： Public Shared Sub SaveDivScrollPosition(ByVal divIDArray As String, ByVal objPage As Page)        Dim saveScrollP
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值