百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

Vue实战065:ScrollBehavior实现路由记录滚动行为

xsobi 2024-11-26 10:13 20 浏览

为什么要记录滚动行为

这个主要是为了提高用户的体验效果，用户点击浏览器“前进/后退”按钮时记录下此时页面的滚动位置，当用户再次访问到该页面时会自动定位到上一次浏览到的位置（注意：浏览器“刷新”时会记录浏览器滚动条位置并自动滚回，这是浏览器的默认行为）。

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实战系列，在此也非常感谢大家对小编的支持！

相关推荐

在 Linux 系统中安装 Redis 的详细步骤

以下是在Linux系统中安装Redis的详细步骤，支持通过包管理器安装（简单快捷）和源码编译安装（获取最新版本）两种方式：方法1:使用包管理器安装（推荐新手）适用于Ubuntu/De...

在Linux系统上安装Redis集群的详细步骤

以下是在Linux系统上安装Redis集群的详细步骤，基于Redis6.x+版本，采用三主三从（6个节点）的典型配置模式：1.安装前准备环境要求系统：Ubuntu/CentOS等主流Linux发行...

Linux入门使用教程

Linux入门一、初始化配置CentOS初始化安装在开始熟悉Linux操作命令之前，我们必须先搭建好Linux操作系统环境，我们这里选用的是Linux的发行版本CentOS7，在安装好CentOS操作...

06新手学习:Linux入门级命令教程

1、开启终端问题：什么是终端（Terminal）答：Linux操作系统中用于输入命令的位置打开后，效果如下图所示：2、Linux命令格式什么是Linux的命令？答：就是指在Linux终端（命令行）...

【笔记】windows10安装linux双系统教程(可能是现今最简单方法)

这周测试成功了大牛漂移菌教的树莓派系统镜像的压缩方法（【树莓派】小空间树莓派镜像系统备份方法img镜像文件压缩方法），虚拟机下备份镜像不太方便，无论是存储空间还是读卡操作都不方便。所以打算装个linu...

网络安全工程师:小白是如何让Kali Linux操作系统从U盘成功启动

一、背景介绍作为一名渗透测试工作人员（或者小白），在我们的日常工作或者学习中，我们不可能时时刻刻将自己的个人电脑（安装好KaliLinux的个人主机）带在身边，当我们没有带自己的个人电脑而需要进行渗...

Linux配置ip地址的两种方法

Linux配置ip地址的两种方法，实验环境为centos7.6方法1：nmcli工具配置（centos7以下版本不支持该方法）第一步，通过nmcliconnection查看网卡名称[root@lo...

Linux man 命令使用教程

简介man=manual(手册)命令用来查看Linux系统命令、函数、配置文件、系统调用等的官方文档。几乎所有标准程序和工具都有对应的man手册。基本语法man[options][s...

Linux程序安装与管理指南

在Linux系统中，安装和管理程序主要通过包管理器和手动编译安装两种主要方式实现。以下是详细的操作指南，涵盖常见发行版（如Ubuntu/Debian、CentOS/RHEL、Fedora等）的用法。一...

零基础保姆级教程!手把手教你免费玩转Linux安装+学习环境搭建!

前期准备安装VMware虚拟机首先你要安装VMware虚拟机,如果你还不知道VMware是什么可以去看我的VMware相关教程,里面有详细解答检查V-CPU虚拟化是否开启当我们在虚拟机安装系统的...

网络安全工程师:小白如何使用Kali Linux生成木马后门并实现免沙

1.背景介绍msfvenom是msfpayload和msfencode的结合体，可利用msfvenom生成木马程序,并在目标机上执行,在本地监听上线，在黑客圈子，这款工具略有名气。本次教程是Msfve...

Linux详解系列一:如何安装系统及客户端工具的使用

Linux是一种开放源码的操作系统，和Windows不同的是，由于其具有开源，稳定性强，安全，多用户操作等特点,它的使用场景非常广泛，比如企业中所使用的服务器中的操作系统，以及移动端的Andr...

4种方案供你选，微软发布《如何下载和安装Linux》教程

IT之家10月14日消息，微软近日发布了一个教程指南《如何下载和安装Linux》，介绍了使用WSL、本地安装、本地虚拟机和云端虚拟机4种方案。该指南重点介绍了用户在PC上运行Li...

嵌入式Linux开发教程:Linux Shell

本章重点介绍Linux的常用操作和命令。在介绍命令之前，先对Linux的Shell进行了简单介绍，然后按照大多数用户的使用习惯，对各种操作和相关命令进行了分类介绍。对相关命令的介绍都力求通俗易懂，都给...

Linux基础手把手教学:使用22.04系统

Linux基础手把手教学：使用Ubuntu22.04系统。1.这节来讲一下下边的目录结构，因为只有清楚了解linux下边的目录结构，才能很方便地进行操作。linux下边的目录结构较为简单...

一周热门
最近发表
标签列表