Vue实战065:ScrollBehavior实现路由记录滚动行为
xsobi 2024-11-26 10:13 1 浏览
为什么要记录滚动行为
这个主要是为了提高用户的体验效果,用户点击浏览器“前进/后退”按钮时记录下此时页面的滚动位置,当用户再次访问到该页面时会自动定位到上一次浏览到的位置(注意:浏览器“刷新”时会记录浏览器滚动条位置并自动滚回,这是浏览器的默认行为)。
Vue路由模式
vue路由跳转提供了两种模式hash和history(默认的是hash模式),都是利用浏览器的存储机制来记录路由。不同的是hash会在地址栏URL中现实“#”符号(但不会被包含在HTTP请求中),可以通过onhashchange的方法来改变页面的跳转(只能改变# 后面的部分)。history则去除了URL中的“#”符号并在HTML5中新增了pushState() 和replaceState() 方法,可以对历史记录进行修改实现更好的控制URL。
Vue路由跳转
Vue实现路由跳转可以直接通过<router-link> 标签(通过to属性来指向目标路由)或者路由事件跳转,事件跳转提供了多种方法。这里我们可以通过history模式搭配this.$router.push()方法来实现路由跳转记录,这样当Vue跳转路由时就会通过 history.pushState()方法的向history 栈中存放一条记录。当点击前进或后退时就会对 history 栈中的记录进行访问,如果存在则执行跳转。
早期思路:
利用SessionStorage或者Vuex进行本地存储,获取当前浏览器滚动条位置(document.documentElement.scrollTop ||document.body.scrollTop||window.pageYOffset ),然后将该路由对应的滚动条位置存入SessionStorage或者Vuex中。当再次访问该路由时通过SessionStorage或者Vuex中获取到该路由的滚动条位置,然后通过设置页面的滚动位置来恢复到上一次浏览的位置。如何使用Vuex可以参考文章:vue实战开发014:状态管理模式Vuex使用详解,SessionStorage使用可以参考文章:vue实战开发020:LocalStorage与SessionStorage的区别与用法。
ScrollBehavior方法
为实现该功能Vue为我们提供了scrollBehavior方法(需支持 history.pushState 的浏览器),该方法接受3个参数分别是to (要进入的路由对象)、 from(离开的路由对象)和savedPosition(记录滚动条的坐标值)。在创建Router实例的时候我们定义下scrollBehavior方法,如果savedPosition存在则定位到保存的位置如果没有则回到顶部即可。
附加:滚动到锚点
描点:通过在文档中设置标记,然后在指定的位置创建到这些锚记的链接。当用户点击相应的链接时就可以快速定位到被标记的位置。原理通过 offsetTop 获取对象到父级窗体顶部的距离,然后赋值给 scrollTop(设置匹配元素的滚动条的垂直位置),就能实现锚点的功能了。
总结:
利用ScrollBehavior方法可以快速的实现记录当前页面的滚动位置,该方法基于HTML5拓展的新功能需要浏览器支持才行,在跳转路由的时候可以使用this.$router.push()方法向history栈中存滚动位置记录。以上内容是小编给大家分享的Vue实战065:ScrollBehavior实现路由记录滚动行为,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考专栏:Vue实战系列,在此也非常感谢大家对小编的支持!
相关推荐
- bootstrap入门
-
bootstrap是一个前端ui框架,它把我们网页开发常用的功能都写好了,我们使用它可以像搭积木一样的轻松的开发网站,不过现在都流行前后端分析了,而且layui也比较好用,个人觉得无论哪个ui框架,我...
- BootStrap简介及应用要点
-
BootStrap简介BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使它们只需要专注业务逻辑,...
- 如何在Bootstrap Studio中使用图标字体?
-
BootstrapStudioforMac是一款网站设计制作工具,图标字体类似于普通的Web字体,但是它们包含矢量形状,而不是字母和数字。那么如何在BootstrapStudio中使用图标字体...
- Bootstrap5.0-全球流行的前端开源UI工具包迎来了大版本更新
-
Bootstrap5.0正式发布了,带来了很多亮点,还学得动吗?Bootstrap介绍...
- BootstrapBlazor 模板适配移动设备使用笔记
-
项目模板BootstrapBlazorApp模板为了方便大家利用这套组件快速搭建项目,作者制作了项目模板(ProjectTemplates),使用dotnetnew命令行模式,使用步骤...
- bootstrap的tab标签页的使用
-
标签tab页在,当前的web中应用十分广泛,君不见,在博客的右侧出现的最新文章和随机文章中有它的身影,在大型门户网站中也有它的身影,可以说其无处不在的刷着存在感。既然其如此嚣张的存在,我们没有理由不应...
- 使用 Bootstrap 的最简单方法 - 让你的 HTML 看起来赏心悦目
-
什么是BootstrapBootstrap是一个免费的开源CSS框架,使得前端Web开发变得更加简单。...
- Bootstrap-table 使用总结
-
一、什么是Bootstrap-table?在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这...
- 建议收藏:哪些电子发票有XML格式?
-
报销时,财务要求提供发票XML格式。但不是所有的电子发票都有哦,目前只有数电发票(全面数字化的电子发票)有XML格式!目前的数电发票有下面这几大类:1、电子发票(增值税专用发票):适用于增值税一般纳税...
- Mybatis中mapper的xml解析详解
-
上一篇文章分析了mapper注解关键类MapperAnnotationBuilder,今天来看mapper的项目了解析关键类XMLMapperBuilder。基础介绍回顾下之前是在分析configur...
- word修改文中任意一处文字,其他地方相同的内容自动修改
-
我们工作写方案处理word的时候,经常会遇到这么一种情况,即文中存在多处相同的文字内容,可能是词语,也可能是段落。当我们修改了其中一处后,其他地方还得手动修改,十分不便。今天给大家分享一下,在word...
- 第9天 | 鸿蒙App开发实战,XML创建布局,共性很重要
-
XML声明布局的方式更加简便直观,是开发App的核心内容之一,咱们完全有必要搞清楚。每一个Component和ComponentContainer对象大部分属性都支持在XML中进行设置,它们有各自的X...
- 可扩展标记语言格式XML
-
1,XML(eXtensibleMarkupLanguage):指可扩展标记语言,一种数据表示格式,被设计用来传输和存储数据,不用于表现和展示数据。2,XML和基于XML的语言的整个结构是...
- 比较一下JSON与XML两种数据格式?
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
- PROFINET工业以太网教程(16)-GSDML文件详解
-
前面的文章(PROFINET工业以太网教程(10)——GSD文件)我们介绍过GSD文件,它的全称是“GeneralStationDescription”,中文翻译为“通用站描述文件”。GSD文件的...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- firebug 使用 (31)
- characterencodingfilter (33)
- getmonth (34)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)
- android应用开发 (31)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- localhost 8080 (32)
- 多态 (32)
- xmlhttp (35)
- mysql更改密码 (34)