最近项目中遇到这样一个问题,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. [转]MSSQL中利用TOP提高IF EXISTS查询语句的性能

    本文转自:https://blog.csdn.net/f_r_e_e_x/article/details/51704784 --有可能返回一条或多个结果集,其实我们只需要知道是否 --有数据即可,这样 ...

  2. 获取呈现在格表(table)记录的主键

    用mouse点击表格(table)的行或是批定列,获取记录的主键值.在ASP.NET的MVC应用程序中,已经没有办法象ASP.NET的Data控件一样,如GridView,DataList和Repea ...

  3. 在jQuery定义自己函数

    刚才有学习<在jQuery定义自己的扩展方法函数>http://www.cnblogs.com/insus/p/3415312.html .现在想练习一下定义自定义函数.经重构之后,还是发 ...

  4. Spring基础(7) : Bean的名字

    1.普通bean是用id标志,context.getBean时传入名称即可获得. <bean id="p" class="com.Person"/> ...

  5. 处理html内容,获取纯文本

    import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import java.util.rege ...

  6. MYSQL查询优化:Limit

    Limit语法: SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset LIMIT子句可以被用于强制 SELECT 语句返回指定的 ...

  7. spring中获取ApplicationContext对象的技巧,含源码说明

    第一步,实现接口ApplicationContextAware,重写setApplicationContext方法,下方代码标红的地方,绿色部分 可以通过声明来进行存储到本类中. @Component ...

  8. 理解Java线程

    使用多线程的目的是更好的利用cpu资源,大部分多线程代码都可以用单线程来实现,但也有无法用单线程实现的,如:生产者消费者模型 下面对一些常用的概念进行区分: 多线程:指的是这个程序(一个进程)运行时产 ...

  9. HDU1114(KB12-F DP)

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  10. 一个挺好用的生成GIF格式图片的小程序

    import os import re import imageio pic_list = os.listdir() pic_type = ['png', 'jpg', 'jpeg', 'bmp'] ...