最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变。
 方法一: 监听路由
// app.vue    
export default {
watch:{
'$route':function(to,from){
           document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
        }
}
方法二: 全局路由卫士
// router.js
router.afterEach(() => {
document.body.scrollTop = ;
document.documentElement.scrollTop = ;
})
补充: hash模式下才会导致上述问题,history模式下vue官网有更好的处理方法。

vue2.0路由切换后页面滚动位置不变BUG的更多相关文章

  1. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  2. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  3. vue路由管理-保留滚动位置功能、按需加载模块名自定义

    路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态 ...

  4. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  5. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  6. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  7. vue 路由跳转记住滚动位置,返回时回到上次滚动位置

    参考:https://blog.csdn.net/qq_40204835/article/details/79853685 方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 ...

  8. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  9. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

随机推荐

  1. 客服端与服务端APP支付宝支付接口联调的那些坑

    根据支付宝官方提供的文档的建议: TIPS:这一步应在商户服务端完成,商户服务端直接将组装和签名后的请求串orderString传给客户端,客户端直接传给SDK发起请求.文档和Demo是为了示例效果在 ...

  2. SQL Server T—SQL 基本编程

    一 定义变量 declare   @变量名   数据类型 例:declare  @a  int              -- 变量名前必须有 @ 二 赋值 set     @变量名 = 值 sele ...

  3. [android] WebView自定义浏览器

    在布局文件中添加<EditText/>和<Button/>控件, 在布局文件中添加<WebView/>控件 在Activity中获取WebView对象 调用WebV ...

  4. Mybatis一对一,一对多

    一对一 假如有student表(学生表)和student_card表(学生证表). student表中有一个字段self_card用来查student_card,student_card表中有一个st ...

  5. Java - "JUC" Semaphore源码分析

    Java多线程系列--“JUC锁”11之 Semaphore信号量的原理和示例 Semaphore简介 Semaphore是一个计数信号量,它的本质是一个"共享锁". 信号量维护了 ...

  6. python3.8 新特性

    https://docs.python.org/3.8/whatsnew/3.8.html python 3.8的新功能本文解释了与3.7相比,python 3.8中的新特性. 有关完整的详细信息,请 ...

  7. layui table 行号

    {type: 'numbers', title: '序号', width: '80'}

  8. 如何选型商业智能和分析平台,Gartner给了这些建议!

    文 | 水手 在2017年1月20日Gartner发布的<China Summary Translation: 'Survey Analysis: Customers Rate Their BI ...

  9. mvp在flutter中的应用

    mvp模式的优点mvp模式将视图.业务逻辑.数据模型隔离,使用mvp模式,能使复杂的业务逻辑变得更加清晰,使代码更具有灵活性和扩展性,正是这些优点,使mvp模式广泛应用于原生开发中. flutter使 ...

  10. C# 程序员最常犯的 10 个错误http://www.oschina.net/translate/top-10-mistakes-that-c-sharp-programmers-make

    来源:http://www.oschina.net/translate/top-10-mistakes-that-c-sharp-programmers-make 关于C# C#是达成微软公共语言运行 ...