Vue实战065:ScrollBehavior实现路由记录滚动行为
xsobi 2024-11-26 10:13 19 浏览
为什么要记录滚动行为
这个主要是为了提高用户的体验效果,用户点击浏览器“前进/后退”按钮时记录下此时页面的滚动位置,当用户再次访问到该页面时会自动定位到上一次浏览到的位置(注意:浏览器“刷新”时会记录浏览器滚动条位置并自动滚回,这是浏览器的默认行为)。
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实战系列,在此也非常感谢大家对小编的支持!
相关推荐
- 不要过度使用列表(List): C# 数据结构
-
编程中的每一个决定都会对性能和清晰度产生无声的影响。在C#中,这样重要的选择之一就是选择正确的数据结构。数据结构是基础支柱。这些结构是数据生存、呼吸和交互的地方,决定了代码的效率和可读性。但...
- Power Query中使用List.Accumulate函数做分组操作
-
在Excel中对于分数评级,最简单快捷的办法就是用VLOOKUP函数了,评级的条件可以使用做好的评级表格,也可以直接用数组写在公式内部。或者这样:在PowerQuery中我们用什么办法才能做到这样的...
- C#夯实基础-Lambda在List中的使用
-
在C#中基本类型比如List,Dictionary,数组等都有委托来实现相关的操作。此时Lambda表达式就可以使用了.实例1,查找字符串List的包含a的元素代码//字符串型的listList&...
- JAVA中ArrayList、LinkedList及CopyOnWriteArrayList实现原理
-
ArrayList,LinkedList的存储性能和特性?1、是否保证线程安全:ArrayList和LinkedList都不保证线程安全,如果要线程安全用CopyOnWriteArrayLis...
- js将list转化为tree格式的几种写法
-
最近在考虑一个树状结构存储。最终需要将list转化为tree格式源数据示例源数据共401条[{"menuId":"5f50c5fb8f0d74536bbfb7a4"...
- 列表框(List Box)之应用实例(列表框方法)
-
【分享成果,随喜正能量】人生是需要等候的,等候一阵风的拂过,等候一朵花的盛开,等候伊人的到来,等候生命爆发的强音。心灵是需要在等候中坚守的,坚守无风的日月,坚守落花的寂寞,坚守情感的空白,坚守生活的平...
- 不会用list的程序员不是好程序员,C++标准容器list类实例详解
-
C++中的list(列表)是顺序容器,其中存储的元素并不是内存连续的,这一点和上一节讨论的deque是类似的。list容器类的特点稍后几节将要讨论的C++中的vector(向量)容器中的元素...
- CopyOnWriteArrayList 读写分离,弱一致性
-
为什么会有CopyOnWriteArrayList?我们知道ArrayList和LinkedList实现的List都是非线程安全的,于是就有了Vector,它是基于ArrayList的线程安全集合,但...
- Java 中List 和数组之间互相转换的方法
-
在Java中,List和数组之间的互相转换是非常常见的操作。以下是常用的方法及其示例代码:1.数组转List方法1:使用Arrays.asList()特点:返回的List是一个固定大小...
- VBA数组进阶调用.NET ArrayList(vba function 数组参数)
-
之前很多文章都讲过VBA数组。但是VBA数组比较鸡肋,功能比较弱,使用起来不是很方便,需要自行封装很多数组方法,这对于新手来说很不友好。今天给大家讲讲,怎么用.Net自带的ArrayList扩展VBA...
- 面试官-如何实现数组和 List 之间的转换?
-
数组和List是Java开发中常见的两种数据结构,那么如何实现二者之间的快速转换就成了面试官常问的考点之一,下面我们我们就来从数组转List和List转数组两个方面来展开介绍一下。数组转List方法...
- Java 如何在 Array 和 List 之间进行转换
-
概述在本文章中,我们对如何在Java中对Array和List进行转换进行一些说明和示例。这些示例通过使用CoreJava和一些第三方的转换工具,例如Guava和ApacheC...
- Excel 进阶教程:ArrayList + VBA,轻松搞定复杂数据统计
-
在VBA(VisualBasicforApplications)中,ArrayList是一个动态数组对象,它提供了比普通VBA数组更强大的功能。ArrayList是.NETFram...
- Java并发工具:CopyOnWriteArrayList
-
CopyOnWriteArrayList是Java中java.util.concurrent包提供的一种线程安全的List实现。它特别适用于读多写少(Read-mostly)的并发场景,...
- 一起来聊聊Java中的ArrayList(java arrays.aslist)
-
提起ArrayList相信对于java开发人员来说并不会感到陌生,甚至会有种亲切感。好像每次出去面试,多多少少都会跟它扯上点关系。所以导致网上以及各大培训机构都对其源码有着丰富的解读。但是,本篇文章并...
- 一周热门
- 最近发表
-
- 不要过度使用列表(List): C# 数据结构
- Power Query中使用List.Accumulate函数做分组操作
- C#夯实基础-Lambda在List中的使用
- JAVA中ArrayList、LinkedList及CopyOnWriteArrayList实现原理
- js将list转化为tree格式的几种写法
- 列表框(List Box)之应用实例(列表框方法)
- 不会用list的程序员不是好程序员,C++标准容器list类实例详解
- CopyOnWriteArrayList 读写分离,弱一致性
- Java 中List 和数组之间互相转换的方法
- VBA数组进阶调用.NET ArrayList(vba function 数组参数)
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- characterencodingfilter (33)
- getmonth (34)
- label换行 (33)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)
- htmlposition (33)
- 学校网站模板 (34)
- textarea换行 (34)
- 轮播 (34)
- asp net三层架构 (38)
- bash (34)