vueRouter中scrollBehavior实现滚动固定位置

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在 HTML5 history 模式下可用。

当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:

const router = new VueRouter({routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置}
})

scrollBehavior 方法接收 tofrom 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息,长这样:

  • { x: number, y: number }
  • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注:falsy 不是 false,参考这里)的值,或者是一个空对象,那么不会发生滚动。

举例:

scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 }
}

对于所有路由导航,简单地让页面滚动到顶部。

返回 savedPosition,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:

scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}
}

如果你要模拟『滚动到锚点』的行为:

scrollBehavior (to, from, savedPosition) {if (to.hash) {return {selector: to.hash}}
}

我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子:

const scrollBehavior = (to, from, savedPosition) => {if (savedPosition) {// savedPosition is only available for popstate navigations.return savedPosition} else {const position = {}// new navigation.// scroll to anchor by returning the selectorif (to.hash) {position.selector = to.hash}// 如果meta中有scrollTopif (to.matched.some(m => m.meta.scrollToTop)) {// cords will be used if no selector is provided,// or if the selector didn't match any element.position.x = 0position.y = 0}// if the returned position is falsy or an empty object,// will retain current scroll position.return position}
}

keepAlive结合,如果keepAlive的话,保存停留的位置:

scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {if (from.meta.keepAlive) {from.meta.savedPosition = document.body.scrollTop;}return { x: 0, y: to.meta.savedPosition ||0}}
}

在文档页面(http://localhost:8080/document)拉动滚动条,然后刷新浏览器会发现滚动条依然在原来的位置,这是浏览器的默认行为,会记录浏览器滚动条默认位置。

但是点击浏览器“前进/后退”按钮,会发现当初那个页面的滚动条从0开始了,没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮,页面滚动条要记录上一次的位置,这时需要设置它的的滚动行为。

这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数,函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”,或者切换导航的时候触发。

scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。console.log(to) // to:要进入的目标路由对象,到哪里去console.log(from) // from:离开的路由对象,哪里来console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}}
let router = new VueRouter({mode:'history',//默认是hash模式linkActiveClass:'menvscode-active',scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。console.log(to) // to:要进入的目标路由对象,到哪里去console.log(from) // from:离开的路由对象,哪里来console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}if(savePosition) {return savePosition;}else{return {x:0,y:0}}},routes:[{path:'/',name:'index',component:Home,},{path:'/home',name:'Home',//name代表当前的路由component:Home,alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。},{path:'/document',name:'Document',components:{ // 多个视图的时候,默认渲染default的视图。default:Document,slider:Slider,home:Home}}]
})
export default router

我们还可以设hash来控制滚动行为,定位到某一位置

if(to.hash){ //先判断目标路由有没有hash值return {selector:to.hash}
}

App.vue:在路径后面添加 hash 值。

<template><div id="app"><div class="nav-box"><ul class="f-cb"><li><router-link to="/" exact tag="div"  event="mouseover">home</router-link></li><li><router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link></li><router-link to="/about" tag="li" event="mouseover"><i></i><span>about</span></router-link></ul></div><div class="content f-cb"><router-view name="slider"></router-view> <!-- 命名视图 --><router-view class="center"></router-view></div></div>
</template>

@/components/Document.vue

<template><div>我是文档<p id="abc">定位到这个元素</p></div>
</template>

router/index.js

let router = new VueRouter({mode:'history',//默认是hash模式linkActiveClass:'menvscode-active',scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。console.log(to) // to:要进入的目标路由对象,到哪里去console.log(from) // from:离开的路由对象,哪里来console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}/*if(savePosition) {return savePosition;}else{return {x:0,y:0}}*/if(to.hash){ //先判断目标路由有没有hash值return {selector:to.hash}}},routes:[]
})
export default router

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/654047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GD32移植FreeRTOS+CLI过程记录

背景 之前我只在STM32F0上基于HAL库和CubeMX移植FreeRTOS&#xff0c;但最近发现国产化替代热潮正盛&#xff0c;许多项目都有国产化器件指标&#xff0c;而且国产单片机确实比意法的便宜&#xff0c;所以也买了块兆易创新的GD32F303开发板&#xff0c;试一试它的优劣。虽然GD…

详细PyTorch安装步骤

PyTorch的安装步骤可以参考以下教程&#xff1a; 安装Anaconda&#xff1a;首先需要安装Anaconda&#xff0c;这是一个Python发行版&#xff0c;包含了Python、pip、conda等常用工具。可以从Anaconda官网下载并安装最新版本的Anaconda。 创建虚拟环境&#xff1a;Anaconda中可…

【Web前端实操17】导航栏效果——滑动门

滑动门 定义: 类似于这种: 滑到导航栏的某一项就会出现相应的画面,里面有对应的画面出现。 箭头图标操作和引用: 像一些图标,如果需要的话,可以找字体图标,比如阿里巴巴矢量图标库:iconfont-阿里巴巴矢量图标库 选择一个——>添加至购物车——>下载代码 因…

Facebook的智能时代:AI技术在社交中的崛起

随着科技的快速发展&#xff0c;人工智能&#xff08;AI&#xff09;技术已经深刻改变了我们的生活方方面面&#xff0c;而社交媒体领域也不例外。在这个信息爆炸的时代&#xff0c;Facebook正以令人瞩目的速度推动着AI技术在社交领域的崛起。本文将深入探讨Facebook如何在智能…

物化视图(Materialized view)详解

什么是物化视图 物化视图&#xff08;Materialized View&#xff09;是一种预先计算和存储的查询结果&#xff0c;类似于数据库中的表。与普通视图不同&#xff0c;物化视图在创建时会将查询的结果物理存储在内存或磁盘上&#xff0c;而不是在查询时动态计算。 物化视图与视图…

STM32控制DS18B20温度传感器获取温度

时间记录&#xff1a;2024/1/28 一、DS18B20温度传感器介绍 &#xff08;1&#xff09;测温范围-55℃~125℃&#xff0c;在-10℃到85℃范围内误差为0.4 &#xff08;2&#xff09;返回的温度数据为16位二进制数据 &#xff08;3&#xff09;STM32和DS18B20通信使用单总线协议…

Nginx解析漏洞复现

首先这个漏洞不是软件或代码的问题&#xff0c;是认为疏忽造成的。 一、环境搭建 从vulhub上面下载vulhub-master.zip文件&#xff0c;上传到服务器中&#xff0c;或者直接在服务器下载。 unzip vulhub-master.zip 进入漏洞目录 cd /vulhub-master/vulhub-master/nginx/ng…

【electron】打包问题处理

目录 项目无法在win7执行场景尝试处理 项目无法在win7执行 场景 使用electron25.0.1、electron-builder24.2.1&#xff0c;打出来的项目在win7系统上跑不起来&#xff0c;报错无法定位程序输入点DiscardVirtualMemoty于动态链接库KERNEL32.dll上。 尝试处理 通过百度发现ele…

高分文献解读|乳酸通过与可溶性腺苷酸环化酶结合调控铁代谢

乳酸(LA)的过量产生可能发生在运动期间或者许多疾病中&#xff0c;例如癌症中。个人伴有高乳酸血症的患者常表现为贫血、血清铁减少以及一种铁代谢关键调控因子—铁调素&#xff08;hepcidin&#xff09;升高。然而&#xff0c;目前尚不清楚乳酸是否以及如何调节铁调素的表达。…

微服务舞台上的“三步曲“:Spring Cloud 服务注册、服务发现与服务调用

在当今软件开发的舞台上&#xff0c;微服务架构已然成为引领潮流的主角。而在这场微服务的大戏中&#xff0c;Spring Cloud 以其强大的工具集成为关键演员&#xff0c;为我们呈现了一个完美的"三步曲"&#xff1a;服务注册、服务发现与服务调用。 第一步&#xff1a…

算法39:统计全 1 子矩形(力扣1504)----单调栈

题目: 给你一个 m x n 的二进制矩阵 mat &#xff0c;请你返回有多少个 子矩形 的元素全部都是 1 。 示例 1&#xff1a; 输入&#xff1a;mat [[1,0,1],[1,1,0],[1,1,0]] 输出&#xff1a;13 解释&#xff1a; 有 6 个 1x1 的矩形。 有 2 个 1x2 的矩形。 有 3 个 2x1 的矩…

ERP定制费用怎么算?详解跨境电商成本控制策略

在全球化数字经济的浪潮中&#xff0c;跨境电商行业具有潜在的高利润和巨大的发展空间&#xff0c;吸引着众多创业者的关注和投入。然而&#xff0c;与潜在利润相伴随的是种种挑战&#xff0c;成本控制便是其中关键的一环。在这一行业中&#xff0c;ERP定制费用作为一个重要的成…

第十三章认识Ajax(四)

认识FormData对象 FormData对象用于创建一个表示HTML表单数据的键值对集合。 它可以用于发送AJAX请求或通过XMLHttpRequest发送表单数据。 以下是FormData对象的一些作用&#xff1a; 收集表单数据&#xff1a;通过将FormData对象与表单元素关联&#xff0c;可以方便地收集表…

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现 —— 杭州 2024-01-28 code review! 文章目录 C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现1.RTTI、RAII、MVC、MVVM、SOLID简述2.RAII (Resource Acquisition Is Initialization)3.RTTI (Run-Time Type Informat…

js中将回调地狱改装成promise方式的函数

概述&#xff1a; 回调地狱&#xff08;Callback Hell&#xff09;是指在异步编程中&#xff0c;多层嵌套的回调函数导致代码难以理解、维护和扩展的情况。 代码展示&#xff1a; ajax({url: 我是第一个请求,success (res) {// 现在发送第二个请求ajax({url: 我是第二个请求…

多线程面试合集

前言 前文介绍了JVM相关知识&#xff0c;本文将重点介绍多线程相关知识以及工作中的一些经验。 多线程面试合集 什么是多线程&#xff1f;为什么我们需要多线程&#xff1f; 多线程是指在一个进程中同时执行多个线程&#xff0c;每个线程可以执行不同的任务。多线程可以提高…

什么是“原子类“ 和 CAS “无锁化编程“?如何解决 CAS 编程中的 ABA 问题?

目录 一、什么是"原子类"&#xff1f; 二、什么是 CAS &#xff1f; 三、CAS 的 ABA 问题是什么&#xff1f; 四、如何解决 ABA 问题&#xff1f; 一、什么是"原子类"&#xff1f; "原子类"是 Java 标准库提供的 CAS 工具类。存放于 java.ut…

Springboot响应数据详解

功能接口 Controller下每一个暴露在外的方法都是一个功能接口 功能接口的请求路径是RequestMapping定义的路径&#xff0c;浏览器需要请求该功能则需要发出该路径下的请求。 RestController RestControllerControllerResponseBody(响应数据的注解) ResponseBody 类型&#…

【数据分析】numpy基础第二天

文章目录 前言数组的形状变换reshape的基本介绍使用reshapereshape([10, 1])运行结果reshape自动判断形状reshape([-1, 1])运行结果 合并数组使用vstack和hstackvstack和hstack的运行结果使用concatenateconcatenate运行结果 分割数组array_split运行结果 数组的条件筛选条件筛…

Matlab|【完全复现】基于价值认同的需求侧电能共享分布式交易策略

目录 1 主要内容 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序完全复现《基于价值认同的需求侧电能共享分布式交易策略》&#xff0c;针对电能共享市场的交易机制进行研究&#xff0c;提出了基于价值认同的需求侧电能共享分布式交易策略&#xff0c;旨在降低电力市…