vue2.0路由切换后页面滚动位置不变BUG的解决方法


Posted in Javascript onMarch 14, 2018

最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变。

<a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a>
<router-link class="db" to="/user">个人中心</router-link>
useRightNow(){
 if(判断用户存在){
  this.$router.push('/user')
 }else{
  this.$router.push("/login")
 }
}

解决办法很简单,如下,直接监测watch路由变化,然后将body的滚动距离scrollTop赋值为0。

export default {
  watch:{
   '$route':function(to,from){




 document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0; 
   }
  }
 }

补充: hash模式下才会导致上述问题,history模式下vue官网有更好的处理方法。

以上这篇vue2.0路由切换后页面滚动位置不变BUG的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
JS常用正则表达式总结
Nov 12 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
JavaScript实现刮刮乐效果
Nov 01 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 #Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 #Javascript
create-react-app构建项目慢的解决方法
Mar 14 #Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 #Javascript
react以create-react-app为基础创建项目
Mar 14 #Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 #Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
安全生产承诺书
2014/03/26 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2016年元旦寄语
2015/08/17 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
spring boot实现文件上传
2022/08/14 Java/Android