最近项目中遇到这样一个问题,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. java中带参数的try(){}语法

    带资源的try语句(try-with-resource)的最简形式为: try(Resource res = xxx)//可指定多个资源 { work with res } try块退出时,会自动调用 ...

  2. SSH:Hibernate框架(七种关联关系映射及配置详解)

    概念 基本映射是对一个实体进行映射,关联映射就是处理多个实体之间的关系,将关联关系映射到数据库中,所谓的关联关系在对象模型中有一个或多个引用. 分类 关联关系分为上述七种,但是由于相互之间有各种关系, ...

  3. F5刷新缘何会引起表单重复提交

    首先,页面第一次加载,在未进行任何操作,表单没有提交过的前提下,此时点击F5刷新,是没有任何问题的. F5刷新引起表单重复提交 前提条件: 用户已通过 (1)submit按钮 (2)js的form.s ...

  4. MySQL的相关应用

    本文主要介绍数据库中MySQL的基础知识,包括数据插入.数据更新.数据删除.数据查询.函数.CASE语句.表连接.子查询. 一.数据插入(insert 语句) 首先我创建一个表,如下: 接着,进行数据 ...

  5. Java四中引用

      在JDK1.2以后将对象应用分为4中,强引用,软引用,弱引用,虚引用,这样的方式可以更加灵活控制对象的声明周期     强引用   String str = "123";   ...

  6. 撩课-Web大前端每天5道面试题-Day31

    1.web storage和cookie的区别? Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的. Cookie的大小是受限的, 并且每次你请求一个新的页面的时候C ...

  7. JAVA-将内容写入文件并导出到压缩包

    取出数据库表中的内容写入到文件,并将所有文件写入到压缩包最终导出到指定的某目录下        //导出的压缩包格式  xxxx_date        Date currentTime = new ...

  8. 理解Java异常

    一.Java异常的简介 Java异常是Java提供的一种识别及响应错误的一致性机制.具体来说,异常机制提供了程序退出的安全通道.当出现错误后,程序执行的流程发生改变,程序的控制权转移到异常处理器.Ja ...

  9. django-sql注入攻击

    一.原理 什么是sql注入 所谓SQL注入就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串(注入本质上就是把输入的字符串变成可执行的程序语句),最终达到欺骗服务器执行恶意的SQ ...

  10. PHP解决中文乱码

    在php中,中文乱码非常头疼,很麻烦,所以根据在编程的经验,总结以下方法(以utf_8为例), 1.php中在头部header设置编码方式 header("Content-type:text ...