解决vue单页路由跳转后scrollTop的问题


Posted in Javascript onSeptember 03, 2018

作为vue的初级使用者,在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部。

最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了。最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码

router.afterEach(function (to) {
 window.scrollTo(0, 0)
})

路由跳转后就不会出现滚动的问题了。

但是这种做法是不友好的,我们可以使用scrollBehavior (to, from, savedPosition) {}来解决问题。

在我们写路由的时候做个处理,如下

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
 
Vue.use(Router)
 
export default new Router({
 routes: [
 {
  path: '/',
  name: 'HelloWorld',
  component: resolve => require(['../components/HelloWorld.vue'],resolve)
 }
 ],
 scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
 }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。它的使用有很多种,可以试试。

以上这篇解决vue单页路由跳转后scrollTop的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
关于JavaScript的一些看法
May 27 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 #Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 #Javascript
详解vue-cli下ESlint 配置说明
Sep 03 #Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 #Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 #Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 #Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 #Javascript
You might like
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
js匿名函数使用&传参(实例)
2017/09/08 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python线程信号量semaphore使用解析
2019/11/30 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
高三自我鉴定范文
2013/10/19 职场文书
远程研修随笔感言
2014/02/10 职场文书
房屋公证委托书
2014/04/03 职场文书
服务标兵事迹材料
2014/05/04 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
少年雷锋观后感
2015/06/10 职场文书