最近项目中遇到这样一个问题,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. AutoMapper之自定义解析

    自定义解析 4.自定义解析 AutoMapper可以通过名称匹配等规则进行对象的映射,但是在实际的项目中,只是这样是远远不够的,比说我们需要名称不同的字段进行映射,或者需要再加一些逻辑处理.AutoM ...

  2. Redis散列操作

    Redis的散列可以将多个键值对存储在一个Redis键里面.可以把这种数据聚集看作是数据库中的行或者文档数据库中的文档. (添加和删除键值对) HMGET : HMGET key-name key [ ...

  3. Only fullscreen activities can request orientation

    问题 当我们把targetSdkVersion升级到27,buildToolsVersion和相关的support library升级到27.0.2后,在Android 8.0(API level 2 ...

  4. 排序算法(5)--Selection Sorting--选择排序[2]--Heap Sort--堆排序

    1.基本思想 具有n个元素的序列 (h1,h2,...,hn),当且仅当满足(hi>=h2i,hi>=2i+1)或(hi<=h2i,hi<=2i+1) (i=1,2,...,n ...

  5. nodejs 通过nginx后出现响应慢的解决方法

    最近用了nodejs搭建服务器,然后用了nginx做了反向代理,项目开发需求,没办法.但是发现了经过代理之后发现网页请求变慢了,而且是不能忍的一分钟以上. 一开始,怀疑是在nodejs那边的问题,结果 ...

  6. promise 拙见

    一,promise是什么? promise 是最早由社区提出和实现是一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和强大. ES6 将其写进了语言标准,统一了用法,原生提供了 p ...

  7. CPA理论与Base理论

    CPA理论: 由于对系统或者数据进行了拆分,我们的系统不再是单机系统,而是分布式系统,针对分布式系统的CAP原理包含如下三个元素. C:Consistency,一致性.在分布式系统中的所有数据 备份, ...

  8. css实现自适应正方形的方法

    页面布局中,我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢? 很简单,我们可以利用元素的padding或margin的百分比值是参照父元素的宽度这一特性来实 ...

  9. kotlin-2(IdeaIU-2018.2汉化破解)

    1.下载文件包: 链接:https://pan.baidu.com/s/1AaAqkJ5E88k69dhcDiC0tA 提取码:b5uk 2.点击ideaIU-2018.2安装软件,安装完成后,不要点 ...

  10. C#版Aliyun DNS API

    阿里云解析API,是为域名开发者.注册商.域名代理商等提供的开放和便捷的解析服务接口.API依托于万网云解析服务,可以方便的管理域名和解析记录,让你的解析管理变的随心省时自由舒畅. 一.先附上Aliy ...