【Vue-router踩坑】点击图片修改路由跳转到的新页面无法上下滚动问题

最新推荐文章于 2022-08-09 16:20:04 发布
最新推荐文章于 2022-08-09 16:20:04 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JellyFishDing/article/details/104584915
版权
在vue 2.x + vue-router 3.x + elementui环境下，点击图片跳转至新页面出现无法滚动的奇妙bug。问题出在新页面的最外层父容器样式设置为`overflow: hidden`，移除该样式后问题解决，但其原理尚不明确。
摘要由CSDN通过智能技术生成

实在是一个很奇妙的bug……就叫它229奇妙bug吧

环境：vue 2.x + vue-router 3.x + elementui

问题描述

贴一下代码大致结构（属性什么的都没写全）

<template>
	<div class="main">
		<img @click="
最低0.47元/天 解锁文章
JellyFishDing
关注
专栏目录
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
Vue页面跳转this.$router.push({})后滚动条不能滚动到最上边的问题修复
最新发布
weixin_41688688的博客
10-29 2464
Vue、router、Vuex
vue 子组件页面push_vue跳转到子路由子路由的组件页面无法滚动
weixin_39677419的博客
12-22 566
问题描述最近在用vue仿qq音乐，写了四个基础组件：推荐，歌手，排行，搜素。歌手组件是获取一个歌手列表，点击歌手跳转到子路由，歌手的所有歌曲singer-detail组件，singer-detail组件内引用了一个music-list组件，music-list组件包括一个标题栏和一个song-list组件，song-list组件是是该歌手的所有歌曲，遇到了一个问题，当跳转到singer-detai...
vue项目路由跳转页面滚动条不在顶部
ZYX10077的博客
06-02 780
第一种方法：在route文件中使用scrollBehavior import Vue from 'vue' import Router from 'vue-router' const implementOrganPage = () => import('pages/implement-organ-pafge/views/index.vue') Vue.use(Router) export default new Router({ routes: [ { path: '/',
vue页面跳转后，滚动条不在顶部
halo1416的博客
07-21 2615
一、问题描述 vue在将页面滚动到页面中部或者底部（反正不在顶部），再进行页面跳转后，新页面的滚动条还处于上一个页面的位置，并没有更新到页面顶部 二、解决方法 在全局路由钩子里面将页面滚动到页面顶部 router.beforeEach((to, from, next) => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; // 兼容IE window.scrollT
Vue路由跳转后滚动条没有回到最上方的解决方法
rqz__的博客
01-11 1169
滚动行为 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 const router = new VueRouter({ routes: [...], // 当路由跳转后滚动条所在的位置 scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 return { x: 0, y: 0 }
vue-router跳转时打开新页面的两种方法
12-08
记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法： 1、<vue>标签实现新窗口打开 官方文档中说 v-link 指令被 <router> 组件指令替代，且 <router> 不支持 target=”_...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
7. **动态路由匹配**：通过冒号`:`定义动态段，实现基于参数的路由跳转。在组件内部，可以通过`route.params`访问这些参数。 8. **路由守卫**：Vue Router 提供了多种类型的导航守卫，如全局前置守卫、组件内守卫和...
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
通常，我们在Vue组件中会通过`this.$router.push`来实现路由跳转，这是因为`this.$router`是Vue实例中内置的属性，可以直接访问并调用`push`方法。然而，当开发者选择在组件外部或者不在Vue实例作用域内创建一个新的...
解决vue-router切换路由时没有自定滚动到顶部
weixin_39905130的博客
08-17 1233
在做vue项目时，发现一个问题，通过vue-router切换页面时，如果从一个页面的底部切换到新页面，新开的页面初始也会在底部。 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 export default new Router({ routes, s...
Vue路由切换后, 页面滚动位置不变BUG处理
wxl1390的博客
12-16 1872
问题描述: 在路由a的时候，滚动页面到x的位置，此时直接跳转路由b，会发现b页面竟然页停留在x的位置！ 解决方案①:监听路由 直接在app.vue监测路由变化, 让body的滚动距离scrollTop=0/ scrollTo(0,0) export default { watch: { $route: function(to, from) { window.scrollTo(0,0); //document.body.scrollTop = 0; //doc
vue【解决方案】页面/路由跳转后，滚动条消失，页面无法滚动
朝阳39的博客
06-02 3503
原因解析 vue项目中，页面/路由跳转后，body 的内联样式变成 overflow:hidden 解决方案 使用路由守卫，在页面/路由跳转后，将body 的overflow设置为auto src/main.js // 解决bug：页面/路由跳转后，滚动条消失，页面无法滚动 router.afterEach((to, from, next) => { document.querySelector("body").setAttribute("style", "overflow.
vue跳转页面滚动条回到顶部（如果网上百度的方法不能用，试一试这个）
qcg14774125的博客
03-24 621
开始也是在网上百度一大堆类似答案，但是都不能解决，下面来说下怎么解决，很简单就两步 首先在app.vue <template> <div id="app" ref="app"> <router-view/> </div> </template> 加一个ref='app'然后在监听 watch: { $r...
vue页面跳转，滚动条不在顶部
weixin_57167969的博客
11-03 1095
解决vue页面跳转，滚动条不在顶部问题 问题描述：在首页点击指定的路由跳转，跳转到详情页之后，滚动条默认显示在底部，需要手动往上拉才能看到详情标题 解决：在main.js中添加路由守卫 // 解决跳转到详情页，滚动条不在顶部问题 router.afterEach((to, from, next) => { window.scrollTo(0, 0); }); //scrollTo() 方法可把内容滚动到指定的坐标 //语法： scrollTo(xpos,ypos) 找了许久的问题，之前
解决vue中路由跳转时，让滚动条显示在顶部
qq_56989560的博客
04-30 2663
解决vue中页面跳转，显示在顶部
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
jililin123的博客
08-09 1659
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
vue项目，路由跳转页面后滚动条自动回到顶部
weixin_42349568的博客
06-03 4989
一，现象 假设有两个页面，A和B。 当A页面很长时，我们在访问A页面时滚动条滚动到底部，这时候跳转到B页面，滚动条将不会变动，也就是B页面的滚动条还是在底部 二，原因 因为我们使用vue开发项目时，通常是使用vue-router路由来完成页面的跳转，而通常页面的布局如下分为header,aside，main,footer等部分，我们路由跳转只是不断地切换main中的内容罢了。 按f12查看，就可以看到，滚动条实际上是document.body上面的，也就是说，我们路由跳转时，滚动条压根就不受影响。所以才会
VUE 点击图片直接进行页面跳转
prospect_的博客
07-26 8055
最简单的就是设定一个@click，给它一个名字，在script中进行方法定义，但这个跳转直接改变了url，只有父组件中保存的内容才会保留，比如提前设定的header。
vue中使用better-scroll 无法滚动的问题 详解
weixin_43346106的博客
04-11 1751
如下 我的遇到的问题是，有时候主页刚刚加载就直接就不能滚动，有时候滑动到中间，明明下面还有图片，就有滑不动了。在上拉加载更多时，图片是加载了，但是就是要等一下或者直接 不能向上滑动。 better-scroll 滚动原理 better-scroll它有两个div层，wrapper层 和 content层，wrapper 表示的是滑动区域，content表示的滚动内容，当content层的高度或宽度大于wrapper层的时候，就可以纵向滚动和横向滚动了（和游览器页面的滚动原理一样） 这里比我将的更清楚
理解vue-router：SPA单页面路由原理解析
Vue Router提供了多种类型的导航守卫，包括全局守卫、组件级守卫和路由独享守卫，用于在路由跳转前、后进行逻辑处理，如权限验证、数据预加载等。 **组件懒加载**：Vue Router支持按需加载组件，通过异步加载减少...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值