今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法

其实原理很简单  就是在页面加载完毕后  把滚动条的距离设置为（0，0） 就解决了

mounted ()

    this.$router.afterEach((to, from, next) => {

        window.scrollTo(0, 0)

    })

}

很不理解的就是为什么会出现这种情况呢？

Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决的更多相关文章

  1. vue 路由跳转前确认框，刷新浏览器页面前提示确认框

    先看效果图: 1.刷新页面效果: 2.跳转路由(进入别的页面前)效果: 代码: // 路由跳转确认 beforeRouteLeave(to, from, next) { const answer = ...

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

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

  3. vue路由跳转的方式

    vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...

  4. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  5. vue路由跳转报错解决

    vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...

  6. 去除vue路由跳转地址栏后的哈希值#

    去除vue路由跳转地址栏后的哈希值#,我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# mode:"history" import ...

  7. 关闭open页面时刷新父页面列表

    var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...

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

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

  9. vue路由跳转时判断用户是否登录功能

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...

随机推荐

  1. MySQL 5.7 Performance Schema 详解

    refman mysql 5.7 MySQL Performance Schema  用于监视MySQL服务器,且运行时消耗很少的性能.Performance Schema 收集数据库服务器性能参数, ...

  2. SAP中对于获取订单的状态

    在SAP中对于如何获取订单的状态,提供了至少两个函数,分别是 STATUS_READ 和   STATUS_TEXT_EDIT.下面简单介绍这两个函数 1.STATUS_READ  改函数的实现原理大 ...

  3. java.sql.SQLException: Could not commit with auto-commit set on

    This kind of exceptions occur when the Oracle JDBC Driver (ojdbc6.jar) version 12 or above will be u ...

  4. B.Icebound and Sequence

    链接:https://ac.nowcoder.com/acm/contest/903/B 题意: Icebound hates math. But Imp loves math. One day, I ...

  5. HDU-1150-MachineSchedule(二分图匹配)

    链接:https://vjudge.net/problem/HDU-1150#author=0 题意: 在一个工厂,有两台机器A,B生产产品.A机器有n种工作模式(模式0,模式1....模式n-1). ...

  6. GYM 101572A（单调队列优化dp）

    要点 较好的思路解析 \(dp[i]\)为到达\(i\)花费的最短时间,\(dis[i]-dis[j]<=lim1\)的情况其实可以省略,因为就相当于没买咖啡,绝对不优于在那之前的某店买了咖啡并 ...

  7. Codeforces Round #528-A. Right-Left Cipher(字符串模拟）

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  8. 7-36 旅游规划 （25 分(Dijkstra)

    有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该公路要收取的过路费.现在需要你写一个程序,帮助前来咨询的游客找一条出发地和目的地之间的最短路径.如果有若干条路径都是最短的,那么需要输出最便 ...

  9. spring boot 事务

    spring事务:默认自动提交只读:@Transactional(readOnly = true)读写:@Transactional(),因为等同于@Transactional(readOnly = ...

  10. Net Core 2.0生态1

    Net Core 2.0生态 阅读目录 前言:答读者问(time by:2017.8.19) 项目升级到ASP.NET Core 2.0 新增功能:Razor Pages介绍 模板更新 Entity ...