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 相关文章推荐
JS给超链接加确认对话框的方法
Feb 24 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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
德生PL330测评
2021/03/02 无线电
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
js控制frameSet示例
2013/09/10 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python面向对象之继承代码详解
2018/01/29 Python
python调用java的jar包方法
2018/12/15 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python-接口开发入门解析
2019/08/01 Python
python 爬取疫情数据的源码
2020/02/09 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
小学科学教学反思
2014/01/26 职场文书
上课睡觉检讨书
2014/01/28 职场文书
团队经理竞聘书
2014/03/31 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
求职自荐信怎么写
2015/03/04 职场文书
工作简报范文
2015/07/21 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Python实现双向链表
2022/05/25 Python