当前位置: 首页 > news >正文

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

 

在使用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 --

相关文章:

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

在使用vue-router3.0时候,会发现不同的路由之间来回切换,会滚动到上次浏览的位置,今天就来看看这部分的vue-router中的源码实现。 无论是基于hash还是history的路由切换,都对滚动进行了处理,这里分析其中一种即可。 无…...

走心Python实战应用:【requests+re 模块】快速下载原shen图片

人生苦短,我用python 这次给大家带来的是模块实战 以便大家理解学习 觉得写的好的话,可以给我多多点赞鸭~ 走心Python实战应用:【requestsre 模块】快速下载原shen图片一、理解Python requests 模块二、requests 方法三、ruqusets 模块实战…...

Comparable和Comparator的使用

在Java中,Comparable和Comparator都是用来实现对象排序的接口。 Comparable Comparable是一个内部比较器接口,它允许在类定义时对该类进行自然排序。当实现了Comparable接口的类的对象列表被传递给Collections.sort()方法时,该方法将使用该…...

【OJ每日一练】1121 - 耐摔指数

文章目录 一、题目🔸题目描述🔸输入输出🔸样例二、思路解析三、代码参考作者:KJ.JK🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🍂个人博客首页: KJ.JK 💖系列专栏:OJ每日一练 一、题目 🔸题目描述 x星球的居民脾气不太好,但好在他…...

vue项目Agora声网实现一对一视频聊天Demo示例(Agora声网实战及agora-rtc-vue使用,新增在线预览地址)

最终效果 在线预览地址 一、声网简介---->请查看官网 二、声网注册---->请自行百度(创建音视频连接需要在Agora注册属于您的appid) 三、具体实现视频聊天步骤 1、 实现音视频通话基本逻辑 1、创建对象 调用 createClient 方法创建 AgoraRTCCli…...

集成时间序列模型提高预测精度

使用Catboost从RNN、ARIMA和Prophet模型中提取信号进行预测 集成各种弱学习器可以提高预测精度,但是如果我们的模型已经很强大了,集成学习往往也能够起到锦上添花的作用。流行的机器学习库scikit-learn提供了一个StackingRegressor,可以用于…...

(详细)《美国节日》:某月的第几个星期几

目录 一、题目描述: 二、思路: 1、给定 年月日,如何知道这天是星期几? 2、已知这个月的第一天是星期几,如何知道第三个星期一是几号? 3、最后一个星期一 三、思路总结 四、代码 一、题目描述&#xf…...

架构设计的历史背景

架构设计的历史背景 在探讨架构设计的历史背景时,了解软件开发进化的历史是一个重要的起点。了解软件开发的演变过程可以帮助我们更好地理解架构设计的起源和发展。现在,让我们来简要回顾一下软件开发的历史,并探索软件架构出现的背景。 首先…...

C#,初学琼林(06)——组合数的算法、数据溢出问题的解决方法及相关C#源代码

1 排列permutation 排列,一般地,从n个不同元素中取出m(m≤n)个元素,按照一定的顺序排成一列,叫做从n个元素中取出m个元素的一个排列(permutation)。特别地,当mn时,这个排列被称作全…...

MySQL数据库——绘制E-R图:数据库概要设计阶段

在MySQL数据库的概要设计阶段,绘制E-R图是非常重要的一步。E-R图(实体关系图)是一种图形化的工具,用于描述数据库中实体之间的关系。 以下是在MySQL数据库概要设计阶段绘制E-R图的步骤: 确定实体:在MySQL数…...

对类和对象的理解

对象:对象是人们要进行研究的任何事物,它不仅能表示具体的事物,还能表示抽象的规则、计划或事件。对象具有状态,一个对象用数据值来描述它的状态。对象还有操作,用于改变对象的状态,对象及其操作就是对象的…...

edge-tts微软文本转语音库,来听听这些语音是否很熟悉?

上期图文教程,我们分享了Azure机器学习的文本转语音的账号申请与API申请的详细步骤,也介绍了基于python3实现Azure机器学习文本转语音功能的代码实现过程,虽然我们可以使用Azure账号免费提供一年的试用期,但是毕竟是要付费的,我们的API也无法长期使用,好在微软发布了edge…...

MySQL更换存储引擎

要更换 MySQL 5.7 中某个表的存储引擎,可以使用以下的 SQL 命令: sql复制代码 ALTER TABLE table_name ENGINEengine_name; 其中,table_name 是需要更换存储引擎的数据表名称,engine_name 则是需要更换成的新存储引擎名称。 举…...

filebeat收集不规则多行日志

现环境有多行日志输出内容和格式不确定,合并后使用grok默认正则无法收集,需要自己编写正则 日志内容如下: ERROR|2023-04-06 14:27:52|helper|test|http|/api/ad/listBanner|1d60fff861bqwe4b0397be554141eb 127.0.0.1|1b4429-5adb-44d4-acf…...

Token Contrast for Weakly-Supervised Semantic Segmentation

文章来源:[CVPR2023] Keywords:Weakly-Supervised Semantic Segmentation(WSSS);over-smoothing; ViT 一、本文提出的问题以及解决方案: 本文解决了over-smoothing问题,该问题其实是在之前的GCN网络中提出…...

Jenkins运行在docker中使用Maven构建Java应用程序

这篇笔记是Jenkins入门教程使用Maven构建Java应用程序的一个补充说明,因为我照着文档操作的过程中遇到不少问题,遂一一做个笔记。 我的主机是Windows 11,安装的docker是Docker Desktop 4.18.0。 第一点,在Windows里执行docker命…...

将excel导入到sqlite的方法代码

Python实现excel转sqlite的方法,具体如下: Python环境的安装配置就不说了,个人喜欢pydev的开发环境。 python解析excel需要使用第三方的库,这里选择使用xlrd 下面是源代码: #!/usr/bin/python # encodingutf-8 Creat…...

Redis主从复制、哨兵和集群部署

文章目录一、主从复制1、主从复制-哨兵-集群2、主从复制的概念3、主从复制的作用4、主从复制流程5、部署Redis 主从复制步骤6、实例操作:部署Redis 主从复制二、哨兵模式1、哨兵模式的原理2、哨兵模式的作用3、哨兵结构由两部分组成,哨兵节点和数据节点4…...

protobuf序列化

文章目录protubufprotobuf序列化protobuf的原理定义message编译message文件应用protobufMessage 基本用法Message 嵌套使用protubuf protobuf序列化 protobuf是一种比json和xml等序列化工具更加轻量和高效的结构化数据存储格式,性能比json和xml真的强很多&#xff…...

更新时无冲突的情况(阁瑞钛伦特软件-九耶实训)

大多数使用“与资源库同步”菜单的目的是想查看本地和远程资源的差异,并不想将本地的内容进行更新。 而“更新”菜单则不然,它的主要作用是将远程仓库中的内容下载到本地,以使本地的版本内容和仓库中的内容一致。 Step01:复用前…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率&#xff0c…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

C++ 设计模式 《小明的奶茶加料风波》

👨‍🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...

Kafka主题运维全指南:从基础配置到故障处理

#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...