vue--解决多个页面之间滚动互相影响的问题

最新推荐文章于 2025-06-12 19:11:46 发布
最新推荐文章于 2025-06-12 19:11:46 发布
阅读量4.6k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 前端学习 文章标签： vue-页面滚动+动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ada_lake/article/details/100528918
本文介绍了解决Vue.js中页面跳转时滚动位置错误的方法，通过在router配置中添加scrollBehavior函数，确保每次跳转后页面总是从顶部开始，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面在点击跳转到新页面时可能会出现: 新页面的当前所在位置是原页面滑动到的位置，影响用户体验

解决方案
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
router 内添加

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

在这里插入图片描述

动画效果

在这里插入图片描述

引用组件页面
  1. 导入在这里插入图片描述
  2. 注册
    在这里插入图片描述
  3. 使用
    在这里插入图片描述
Vue和Vue-Element-Admin（一）：Vue基础和框架
叶子叶来
10-27 9840
前后端开发容易有成就感，对前端的变魔术式的展示效果和开发一直很感兴趣，奈何毕业后3年都在做大数据平台和数据分析相关的东西，全是业务思路没有IT思路； 当前项目涉及了2个前端展示系统，基于vue-element-admin的前端框架进行前后端分离开发，选择vue-element-admin框架，它是一个vue+element ui的开源技术方案：vue-element-admin 码云地址，教程：vue-element-admin教程，下载即可运行，熟悉vue开发模式即可快速上手，界面看起来比较简洁清爽。.
uni-app 经验分享，从入门到离职（四）——页面栈以及页面跳转的 API（开发经验总结）
热门推荐
黛琳ghz的博客，期待你的关注。
02-21 3万+
这篇文章是本专栏 uni-app 的项目实战篇，主要内容的是页面栈以及页面跳转的 API，页面栈是 uni-app 中一个重要的概念，它用于管理应用程序中的页面层级关系。接下来讲一下如何利用页面栈来实现页面之间的切换和导航，以及如何使用 uni-app 提供的 API 来进行页面跳转等等知识点。
vue中多个路由页面切换造成滚动互相影响问题的解决
浮生离梦的博客
01-03 2870
一、问题描述 在vue的项目开发中，出现了这样的问题。在进入一个路由页面的时候，进行了页面滚动，滚动的位置会被缓存。当离开页面以后，下次再进入一个页面的时候，切换新路由，发现默认进入的位置就是之前滚动的位置。这样，也就造成了多个路由页面滚动会发生互相影响的问题，这也并不是我们所想要的。 二、问题解决 针对这样的问题，通过去vue的官网上，Vue Router中的滚动行为上有解决方法，可以使用scr...
路由原理解析：vue-router 组件的 scrollBehavior解决问题:页面的滚动会影响到其他页面
Yanfengting的博客
03-25 1390
vue对访问记录的管理 当用户进入一个页面的时候，会往 history 栈中放入当前的记录，对页面级别的操作通过操作内置对象 history 可以满足一些需求。 vue 路由跳转就是通过对 history.pushState() 和 history.replaceState() 方法的模拟来实现，会往 history 栈中存放一条记录，这也是为什么 vue 的 router.push 方法只能在支...
解决页面右侧出现两个滚动条的问题，并且不让左侧和顶部的导航栏固定不动
最新发布
ABVHCGH的博客
06-12 200
【代码】解决页面右侧出现两个滚动条的问题，并且不让左侧和顶部的导航栏固定不动。
Vue 折叠组件使用多次新建better-scroll，导致单击事件重复调用
Yuval的博客
02-15 1194
问题： Vue 折叠组件使用多次新建better-scroll，导致单击事件重复调用   解决： 新建better-scroll时，增加条件判断， 如果不存在Bscroll对象时生成新Bscroll对象， 若存在，调用Bscroll的方法refresh()，复用之前的better-scroll对象   例如 if (!this.listScroll) {...
四十六、Vue中路由切换时，滚动行为在组件之间相互影响的解决办法
panchang199266的博客
05-24 1701
一、问题   当我们在A组件中滚动到页面底部时，再通过路由到B组件，会发现显示的也是B组件的底部，而不是从头部开始显示？ 二、原因   组件之间的行为会相互影响。 三、解决办法   在配置路由的地方加上如下代码，例如： router.js import Vue from 'vue' import Router from 'vue-router' import Home from './pages/...
vue仿饿了么商店详情页面（列表左右联动、两侧滚动条互不影响）
大桶爆米花eee
11-16 4514
参考：https://www.jianshu.com/p/66b75f684c84 商店详情页面中要求页面划上去之后到达某一位置时，嘴上的tabs标签固定在最上边，下边的两个菜单列表可以滚动，且两个滚动互不影响；点击左侧的某一类别，右侧跳转到相对应部分。 HTML <body> <div class="header"></div> <div...
vue-seamless-scroll 大屏无缝滚动（数据量少能展示完全就不滚动，滚动时图片展示异常，点击事件异常）
weixin_57468559的博客
08-28 2208
vue-seamless-scroll 大屏无缝滚动，数据量少时不滚动，二轮图片显示异常处理
深入浅出：在Vue中使用vue-amap绘制复杂多边形案例研究
本文针对Vue与vue-amap集成的流程及其在设计复杂多边形地图应用中的应用进行了全面的研究。第一章介绍了Vue与vue-amap的基础概念。第二章详细讨论了在Vue项目中集成vue-amap的过程，包括组件的基础安装、使用以及...
两个vue文件的外层class名一样，样式会相互影响，怎么避免名字相同但是不被影响。
qq_63322025的博客
06-08 1211
要使用CSS Modules，只需在Vue组件的style标签中添加:module修饰符，然后在class名前面添加$style即可。CSS Modules是一种将CSS作用域限制在组件内部的技术，它可以确保每个组件的class名都是唯一的，从而避免了样式冲突的问题。当两个单文件Vue的class名相同时，它们的样式会相互影响。为了避免这种情况，可以使用CSS Modules。
Vue中子组件的弹框滚动条不影响父元素滚动
cindy647的博客
02-26 5625
Vue中子组件的弹框滚动条不影响父元素滚动问题描述解决方法基于Jquery的方式原生JS：给body加上position:fixed==原生JS==：给body加上overflow:hidden 问题描述 在vue的某个页面的子组件中设置了弹框，主页面和弹窗都有滚动条，当弹窗滚动条滑到底部时，会触发主页面的滑动。怎么禁止主页面的滑动？关闭弹窗后，再恢复主页面的滑动。 解决方法 基于Jquery的方...
解决 vue 中拖动时多个页面互相影响的问题 （使用前端路由，当切换到新路由时，想要页面滚到顶部）
brake_lzk的博客
07-20 1153
在路由中，添加 scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 } }当切换到新路由时，想要页面滚到顶部 export default new Router({     routes: [ {        path: '/',        name: 'Home',       component: Home...
vue实现滚动条联动（一个滚动条控制两个或多个）
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
04-28 2013
这样就实现了两边表格的滚动条联动，有多个表格，也是同样的方法，使多个表格的scrollTop和scrollLeft相同就可以了。
有关vue项目页面的结构问题使用flex，控制菜单和内容不一起滚动
qq_43468165的博客
12-29 1120
今天遇到一个特别头大大问题。就是代码改着改着，账号过期后退出了登录页看不见了。 我修改了项目左右的滚动情况（菜单和内容个滚个的）如图所示 就是去控制大的app大盒子不滚动再分别去控制左右的小盒子们去实现自己的滚动 。 所以我去操作了，入口模板文件app.vue 我把样式里面的flex给删除了，写了一个overflow：hidden进去，到这里我只是想让外层的大盒子默认撑开，然后内部子盒子多了就隐藏不显示滚动就好，结果我忘了flex去了，整个页面的宽度是没有了。 就是在编写进入页面后代码时候为什么
element ui 中 调用同一个组件 写两种不同的css样式 如何使两种样式都生效互不影响 el-progress
暴走的山交君的博客
10-11 840
实现 上方进度条其他样式都隐藏只留一个黄色三角形,见下方。但是因为需要修改框架内部css,所以需要深度选择器实现。vue3 项目中需要实现一个播放控件的样式,我用的是。进度条实现, 因为上方黄色三角形需要跟着进度条移动。但这时因为有两个进度条却需要设置两种不同的样式,想设置上面为透明,但是下方样式也更改了。就会直接更改全部进度条的样式。(设置css为透明)
vue页面滚动和textarea滚动冲突问题 ,better-scroll和textarea滚动冲突解决
xtyzmnchen的博客
11-26 2153
//将代码放入全局 ,可解决所有界面中textarea不滚动问题 window.addEventListener('touchmove', function(e) { var target = e.target; if (target && target.tagName ===...
vue2.0和better-scroll实现左右联动效果
weixin_43617604的博客
08-30 943
vue2.0和better-scroll实现左右联动效果 在做移动端商城或者其他页面的时候，经常会遇到左右联动的效果 vue2.0和better-scroll这个插件一起实现左右联动效果。 实现上面的效果，思路一定很重要，还有需求 左边一级分类和右边二级分类形成联动 当滑动右侧分类列表时, 更新左侧分类选中 点击左侧一级分类项时, 右侧列表滑动到对应位置 在vue脚手架的时候，引...
vue导航栏根据页面滚动变化，点击导航栏滚动页面
clmmei_123的博客
11-02 3526
以下是两个导航栏按钮对应两个div。可以自己修改.我是参考 ==》博客《=== 的 这里是在computed下监听导航栏的点击事件，this.$refs = undefined。 1、可以在this.$nextTick(()=>{ //do something})中执行滚动事件 computed:{ ...mapState('menu', { navActive: 'navActive' }), childrenActive(){
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值