原因解析: 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. 1.3 ODBC 部署监控数据库

    一.安装ODBC 来自为知笔记(Wiz)

  2. pat乙级自我回顾:一般错误出现原因

    在obsidian里面写的有些引用没用,需要的可以评论区或者私信我呦~ 对于错误,末尾的换行不影响格式, 段错误: 一般是设置的数组小于题目给定的要求,循环条件i--写成i++,数组下标写错,也有可能 ...

  3. Thingsboard3.2.2本地部署

    Thingboard3.2.2本地安装编译详细教程!!! 一:拉取源码. 创建一个空的文件夹 在此处使用git拉取源码. git clone https://github.com/thingsboar ...

  4. mybatis源码-注解sql

    Mybatis-注解sql Demo 主启动类 public class MybatisHelloWorld { public static void main(String[] args) thro ...

  5. 声网王浩宇:RTE 场景下的 Serverless 架构挑战【RTE 2022】

    前言 在「RTE2022 实时互联网大会」中,声网云原生边缘计算团队的负责人 @王浩宇 Dylan 以<RTE 场景下的 Serverless 架构挑战 -- 声网如何兼顾后端服务的可靠.高效和 ...

  6. BiliBili常用API

    BiliBili 爬虫b站视频信息 api 视频简要信息 http://api.bilibili.com/x/web-interface/archive/stat?aid=170001 http:// ...

  7. WebSocket服务器

    //创建websocket 服务器  ws_server.php //https://wiki.swoole.com/wiki/page/479.html //创建websocket服务器对象,监听0 ...

  8. HTTP TCP UDP WEBSOCKET

    概念: TCP和UDP:传输层协议:(卡车) HTTP:应用层协议:(货物).HTTP(超文本传输协议)是利用TCP在两台电脑(通常是Web服务器和客户端)之间传输信息的协议.客户端使用Web浏览器发 ...

  9. 探究for循环中的var与let的区别

    首先饮用一篇大佬写的博客:for循环中let与var的区别,块级作用域如何产生与迭代中变量i如何记忆上一步的猜想 这篇博客对我有所启发,但是有点抽象. 再借用<JavaScript高级程序设计& ...

  10. Lodash常用函数(二)

    数组/对象方法 1.remove(元素筛选,分到两个数组) 2.sortedUniq (去重,排序) 3.takeRightWhile ( 从array数组的最后一个元素开始提取元素,直到 predi ...