Vue2进阶-第十五篇：Vue2路由高级功能（下）

于 2025-05-01 07:29:01 发布
阅读量241 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端全套教程 文章标签： vue.js 前端 开发语言 javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/youyong/article/details/147616292

Vue2进阶-第十五篇：Vue2路由高级功能（下）

在Vue2的路由体系中，除了之前介绍的权限控制、页面标题设置等功能外，路由滚动行为以及大型应用的路由架构设计也是极为重要的部分。它们对于提升用户体验以及构建稳健、可维护的大型应用起着关键作用。接下来，我们将深入探讨这两方面的内容。

1. 路由滚动行为

滚动行为定义

在单页应用中，当用户进行路由切换时，页面的滚动位置默认不会发生变化。然而，在许多场景下，我们希望能够自定义路由切换时的滚动行为，比如让页面每次切换路由时都滚动到顶部，或者滚动到特定的元素位置。Vue2的路由提供了scrollBehavior方法来实现这一功能。

scrollBehavior方法接收三个参数：to（即将进入的目标路由对象）、from（当前导航正要离开的路由对象）以及savedPosition（在浏览器历史记录中前进或后退时的滚动位置）。通过返回一个包含x和y坐标的对象，我们可以控制页面滚动到指定位置。

例如，要实现每次路由切换时页面滚动到顶部，可以这样配置：

const router =
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue3进阶-第十五篇：SSR概念与准备
无
05-05 148
服务器端渲染（SSR）：SSR的工作流程则有所不同。在服务器端，应用程序在接收到客户端请求后，首先在服务器上渲染整个页面，将数据和模板进行结合，生成完整的HTML内容。服务器将这个已经填充好数据的HTML页面发送给浏览器。浏览器接收到的是一个包含完整内容的HTML页面，可以直接进行渲染和显示，无需等待额外的数据请求。随后，客户端JavaScript代码会挂载到这个已渲染的页面上，增强页面的交互性。例如，对于一个SSR应用，服务器可能生成如下HTML： 两者区别： 首屏加载时间：CSR由于需要先加载J
vue路由从入门到进阶 --- 声明式导航详细教程
共同学习，共同成长
05-30 1930
本文讲解vue路由的【声明式导航（router-link）】【导航高亮】【精确匹配&模糊匹配】【自定义高亮类名】【声明式导航传参 ( 查询参数传参 & 动态路由传参 )】等内容，并结合具体案例让小伙伴们深入理解 ，彻底掌握！
vue-router如何在返回时返回到上次滚动位置
qq_14993591的博客
01-20 1748
路由配置文件里 const router = new VueRouter({ mode: 'history', routes, // to:要进入的目标路由对象，到哪里去 // from:离开的路由对象，从哪儿来 // savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。savedPosition: 会记录滚动条的坐标，点击"后退/前进" 时的记录值(x:?,y:?) scrollBehavior(to, from, sav
vue-router savedPosition 无效问题
supming1的专栏
08-10 3128
按vue-router官网描述，页面返回要保持滚动条位置，需要如下设置： const router = createRouter({ scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { top: 0 } } }, }) 但有时可能你会发现savedPosition返回的数值一直是{left:0,t
vue router 高级使用--笔记5
u012274988的博客
03-23 360
1：可以给每条路由项增加meta信息，用来注入一些自定义的额外信息。可以通过$route 对象或者导航守卫中的路由对象的matched属性来访问，该属性是个数组，可以进行遍历。 如此便可对匹配到的路由进行相关处理了。 注意，若子路由未匹配到，则父路由<router-view>处，无展示，可通过匹配空子路由渲染指定组件。 2：支持对路由变化使用过渡特效，组件激活和失活时触发。通过使用<transition>组件。 （一）给所有路由设置一样的过渡效果。 （二） 给.
Vue2生态栈----路由VueRouter
最新发布
太阳与星辰的博客
02-26 1746
Vue2生态栈----路由VueRouter
关于vue的scrollBehavior（滚动行为）、缓存之前的位置
muzidigbig的博客
07-13 7838
咱们在实际开发中会遇到一个问题：我们在一个很长的列表页往下拉，然后点击列表中的某一个数据进入到详情页查看。此时我们决定返回列表也继续查看列表。很多情况下，由于列表页的组件已经被销毁，所以我们返回到列表页后页面会置顶，不得不又重新下拉查看列表，这样就做了很多没有必要的操作，也是不符合用户的预期。用户希望当我查看玩详情页以后返回，返回列表页的位置是刚刚浏览的位置这种情况有什么好的解决办法呢？scrollBehavior scrollIntoView
Vue进阶（四十七）：面试必备：2024 Vue经典面试题总结（含答案
2401_85158710的博客
07-14 882
MVVM是的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI 组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的， 因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。ViewModel。
Vue-Gantt-chart秘籍大全：15个实用技巧助你成为项目管理专家
首先介绍了Vue-Gantt-chart的基础概念与结构，随后深入讲解了其核心功能，包括基本组件的使用方法、高级功能的配置以及项目数据的处理。第三章聚焦于Vue-Gantt-chart在实践中的应用，包括项目规划、团队协作与沟通、...
Vue3中页面滑到最下面，然后跳转新页面后新页面的位置还是在之前浏览的位置
JackieDYH的博客
12-16 824
/ 在新页面中获取历史记录中的滚动位置并设置为页面的滚动位置 mounted() { const state = history.state || {};// 在新页面中获取传递过来的滚动位置并设置为页面的滚动位置 mounted() { const scrollPosition = this.$route.query.scrollPosition;savedPosition参数保存了当前页面的滚动位置，如果存在此位置，则跳转到新页面时就会保留该位置，否则将滚动到页面的顶部。方法来实现滚动位置的控制。
Vue 滚动行为的具体使用方法
01-19
滚动行为 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 history 模式下可用。 scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。 const router = new VueRouter({ routes: [...], scrollBehavior (to, fro
详解10分钟学会vue滚动行为
12-29
滚动行为 什么是路由的滚动行为 当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样 注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务 我们用scrollBehavior 方法来做路由滚动 scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用 下面我们做一个小案例来了解一下 效果 <div id=app> <h1>滚动行为</h1> <ul> <li><r
vueRouter中scrollBehavior实现滚动固定位置
我的博客简介
01-25 2602
但是点击浏览器“前进/后退”按钮，会发现当初那个页面的滚动条从0开始了，没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮，页面滚动条要记录上一次的位置，这时需要设置它的的滚动行为。使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。在文档页面(http://localhost:8080/document)拉动滚动条，然后刷新浏览器会发现滚动条依然在原来的位置，这是浏览器的默认行为，会记录浏览器滚动条默认位置。
解决vue2路由切换后滚动条停留在上个页面的位置问题
m0_52685922的博客
10-10 1102
【代码】解决vue2路由切换后滚动条停留在上个页面的位置问题。
vue2中切换组件，能够保存滑动的位置分为3步
love147369的博客
02-08 393
vue2中组件切换的时候，保存滑动组件的位置详细教程
Vue再次返回页面滚到到上次点击所在的位置
没化妆，别看
03-07 1437
已知：一个无限滚动的页面A，当点击某一模块的按钮之后，跳转到另一个页面B要求：从B页面返回A页面后，自动滚动到该模块所在的位置。
Vue记住滚动条位置 scrollBehavior + debounce
pingting_的博客
03-14 3947
Vue记住滚动条位置1. 先给占位符加一层缓存2. 在路由上加一个源信息meta，记录滚动条的top值3. 使用 scrollBehavior4. 给页面添加事件监听 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 可以自定义路由切换时页面如何滚动。 注意：这个功能只在支持history.pushState的浏览器中可用 1. 先给占位符加一层缓存 Home 是需要记住滚动条位置的组件 <!-- 路由占位符 --> &
vue后退时保存滚动条位置
weixin_41597344的博客
11-18 1271
在项目中遇到了vue后退时保存滚动条位置的问题，找到了三个方法来解决。 一、使用vue的keep-alive属性 使用<keep-alive> </keep-alive>包裹组件能使组件被缓存起来，而不是被销毁。所以当你浏览器后退时，理所应当的就会回到原来滚动条滚动的位置。 keep-alive组件的include、exclude、max属性能更加轻松的完成你想要的结果。 ...
Vue--路由跳转时的小细节（新页面可视归顶）
AAAXEC的博客
11-02 296
第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。返回 savedPosition，在按下 后退/前进 按钮时，在滚动条位置，就会像浏览器的原生表现那样。这里跳转路由后，此时这个新的页面没有使得可视区域，与页面的头部对齐。我们可以在 Router—index.js的路由配置中添加。该图是首页面，此时它的头部距可视区域为零。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员勇哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值