原因解析: vue项目中,页面/路由跳转后,body 的内联样式变成 overflow:hidden

解决方案: 使用路由守卫,在页面/路由跳转后,将body 的overflow设置为auto

src/main.js:

// 解决bug:页面/路由跳转后,滚动条消失,页面无法滚动
router.afterEach((to, from, next) => {
document.querySelector("body").setAttribute("style", "overflow: auto !important;")
});

vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动的更多相关文章

  1. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  2. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  3. vue路由跳转取消上个页面的请求和去掉重复请求

    vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求

  4. Vue路由跳转时显示空白页面,iview的使用

    最近在用iview做项目,需要实现登录,注册,忘记密码等功能.iview-admin本来就有登录功能,于是想照葫芦画瓢,实现登录界面的注册,忘记密码页面路由跳转. router.js里路由配置,刚开始 ...

  5. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

  6. vue 所有的路由跳转加一个统一参数

    需求是什么 所有的路由跳转加一个统一的参数 实现方式 先深入理解一下router的全局前置守卫 router.beforeEach((to, from, next) => { const que ...

  7. vue二级路由跳转后外部引入js失效问题解决方案

    vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...

  8. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  9. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  10. 简单单页面路由跳转demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. EF6 Code First Migrations

    参考地址:https://learn.microsoft.com/en-us/ef/ef6/modeling/code-first/migrations/ 1.启动Migrations Enable- ...

  2. Hive中的高级函数

    高级函数 1.炸裂函数 UDTF 通常是将数组或者集合中或者结构体(涉及到数据类型-------复杂数据类型)中的元素单个输出 特点:接收一行数据,输出一行或多行数据 2.窗口函数/开窗函数 概念:能 ...

  3. Spring--注解开发定义Bean

    注解开发 先看一看之前的bean的做法: 所谓注解开发,当然就要用到注解啊,就是在BookDao接口的实现类里面进行注解的定义 如图所示: 而在.xml文件里面,就需要进行这样一个操作: 注解当然不会 ...

  4. java网络编程--2 IP,端口,通信协议,TCP/UDP对比

    java网络编程--2 IP,端口,通信协议,TCP/UDP对比 1.3.IP ip地址:InetAddress 唯一定位一台网络上的计算机 127.0.0.1 :本机localhost IP地址的分 ...

  5. 剑指 offer 第 21 天

    第 21 天 位运算(简单) 剑指 Offer 15. 二进制中1的个数 编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 '1' 的个数(也被称为 汉明重量). ...

  6. ACM-NEFU新生训练2-排序和CMP

    A.谁考了第k名-排序 Description 在一次考试中,每个学生的成绩都不相同,现知道了每个学生的学号和成绩,求考第k名学生的学号和成绩. Input 第一行有两个整数,分别是学生的人数n(1≤ ...

  7. 电商平台趋势妙手采集类API接口

    电商平台趋势,平台化.大家可以看到大的电商都开始有自己的平台,其实这个道理很清楚,就是因为这是充分利用自己的流量.自己的商品和服务大效益化的一个过程,因为有平台,可以利用全社会的资源弥补自己商品的丰富 ...

  8. Java并发(一)----进程、线程、并行、并发

    一.进程与线程 进程 程序由指令和数据组成,但这些指令要运行,数据要读写,就必须将指令加载至 CPU,数据加载至内存.在指令运行过程中还需要用到磁盘.网络等设备.进程就是用来加载指令.管理内存.管理 ...

  9. day20:正则表达式

    单个字符的匹配 findall(正则表达式,字符串) 把符合正则表达式的字符串存在列表中返回 预定义字符集(8) \d 匹配数字 \D 匹配非数字 \w 匹配数字字母下划线 \W 匹配非数字或字母或下 ...

  10. 【前端基础】(一)Es6新特性

    1 Es6 全称为ECMAScript是浏览器脚本语言的规范,而各种我们熟知的js语言则是规范的具体体现. 1.1 Es6新特性 ① let与var 作用域 <script> { var ...