原因解析: 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. jquery中,某些写法后来更新导致版本不支持的替代方法

    等号后面的书写替换前面老的书写方法 $.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());$.browser.we ...

  2. swiper常见问题、动态加载数据问题

    swiper加载静态文件是没有问题的 swiper加载动态文件需要在请求后再加载这个函数 参考链接:  https://blog.csdn.net/webzrh/article/details/781 ...

  3. VSCODE C# 运行 找不到任务"BUILD"----C#常用命令

    使用 Visual Studio Code 创建 .NET 类库 - .NET | Microsoft Docs 安装vscode.vscode c#相关拓展.MINIGW64 1.创建文件夹 2.用 ...

  4. python os模块总结-目录、文件操作工具

    os (operating system)是python标准库中的操作系统接口,提供了很多与操作系统进行交互的函数,可快速对目录.文件进行操作. 下面我将在C:\Users\Administrator ...

  5. 继续Vue的探索

    接上集 上次到了想要利用Vue实现隔行变色的请求,但是由于使用的代码过于"高级"导致无法识别,这就需要利用webpack来解决它! webpack的基本使用 1.首先,在项目中安装 ...

  6. 搭建良好编写体验的webgl编程环境 vscode+vit

    因为webgl代码是以字符串的形式嵌入在javascript代码中,这对于我们编写webgl代码的体验不友好,本文介绍如何搭建友好webgl编程环境: 需要安装的vscode插件 WebGL GLSL ...

  7. PHP微信三方平台-授权登录

    一.逻辑步骤解析 步骤 1:第三方平台方获取预授权码(pre_auth_code) 步骤 2:引入用户进入授权页 第三方平台方可以在自己的网站中放置"微信公众号授权"或者" ...

  8. react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符

    1.回顾 module.exports = { entry: {}, output: {}, plugins: [], module: {}, resolve: {}, devServe: {} } ...

  9. uniApp安卓离线SDK运行

    一.下载uniapp提供的离线SDK包 下载地址:https://nativesupport.dcloud.net.cn/AppDocs/download/android 版本:2022年09月26日 ...

  10. 移动端网页--better-scroll介绍

    移动端网页--better-scroll介绍 Options 起始位置及滚动方向 startX:0 开始时的X轴位置 startY:0 开始时的Y轴位置 scrollY: true 滚动方向为 Y 轴 ...