最近项目中遇到这样一个问题,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. 并发编程 —— ScheduledThreadPoolExecutor

    1. 前言 在前面的文章中,我们介绍了定时任务类 Timer ,他是 JDK 1.3 中出现的,位于 java.util 包下.而今天说的 ScheduledThreadPoolExecutor的是在 ...

  2. [转]关于Linux安装mysql默认配置文件位置

    本文转自:https://blog.csdn.net/smile___you/article/details/54409073 在linux下面安装mysql如果在/etc下面没有存在my.cnf配置 ...

  3. 解决MVC应用程序数据重复加载问题

    先来看看这个动画: 这是使用jQuery来实现数据加载,每点击一次,数据就加载一次.这源程序与实现来自<MVC应用程序JsonResult()的练习>http://www.cnblogs. ...

  4. 【Java并发编程】1、ConcurrentHashMap原理分析

    集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...

  5. @ContextConfiguration的意思

    @ContextConfiguration的意思 @ContextConfiguration这个注解通常与@RunWith(SpringJUnit4ClassRunner.class)联合使用用来测试 ...

  6. [转]sqlserver转换为Mysql工具使用

    https://files.cnblogs.com/files/miantiaoandrew/mss2sql_v5-3.zip 1.首先下载工具,链接如上 2.解压出来,运行mss2sql.exe 3 ...

  7. 初识DOM

    初识DOM 一. 节点的获取.插入.创建.删除.替换.修改文本节点 获取 1.document.getElementById 2.(element)document.getElementsByTagN ...

  8. Thinkphp5+PHPExcel实现批量上传表格数据

    1.首先要下载PHPExcel放到vendor文件夹下,我的路径是:项目/vendor/PHPExcel/,把下载的PHPExcel文件放在这里 2.前端代码 <!DOCTYPE html> ...

  9. eclipse搭建hibernate环境

    一.打开eclipse,help=>Install New Software 输入:http://download.jboss.org/jbosstools/updates/stable/kep ...

  10. ionic2.2.1 配置环境变量及创建新项目

    1,jdk的安装与环境配置 jdk下载网址 http://www.oracle.com/technetwork/java/javase/downloads/index.html, jdk环境配置  A ...